IE 11忽略了动态生成的html页面的appendChild()

rlc*_*ews 6 javascript internet-explorer

我正在尝试创建一个伪报告,显示导入数据时的错误.要做到这一点,我有两个功能:

                let createHtmlErrorReport = (err) => {

                    let currentDate = new Date().toLocaleString();
                    let contents = '<!DOCTYPE html> ' +
                        '<html>' +
                        '<head>' +
                        '<title>Import Inventory Import</title>' +
                        '<meta charset="utf-8" />' +
                        '<meta http-equiv="Content-Language" content="en">' +
                        '<style type="text/css">' +
                        ' html { margin:0;  }' +
                        ' body { background-color:#d6d6d6; font: 10pt sans-serif;}' +
                         'ul li{ padding: 3px; font:12pt;}'+
                        ' #header {padding:10px; background-color:#007fcc; color:#ffffff; } ' +
                        '</style>' +
                        '</head>' +
                        '<body>' +
                        '<div id="header">'+
                        '<strong>Import Inventory Import</strong>' +
                        '</div>' +
                        '<p><strong>Imported ' + currentDate + ' by ' + err.username + ' | ' + err.unprocessedItemsCount + ' items not imported | ' + err.processedItemsCount + ' items imported | '+ err.errorMessages.length + ' errors.</strong></p>'+
                        '<p>The following errors occured during import: </p>'+
                        '<div id="errorList" style="padding:5px;"></div>'+
                        '</body>' +
                        '</html>';
                    return contents;

                }
Run Code Online (Sandbox Code Playgroud)

在上面我创建了一个新文档,添加了一些基本样式,然后创建div容器,我想要插入一个错误列表.

<div id="errorList" style="padding:5px;"></div> 
Run Code Online (Sandbox Code Playgroud)

下一个函数调用此方法并构建错误列表

            let generateImportErrorReport = (errors) => {
                        let doc = createHtmlErrorReport(errors);
                        let errorReportWindow = window.open('', '_blank');
                        errorReportWindow.document.write(doc);
                        let list = document.createElement('ul');
                        //builds a list of errors 
                        for (let i = 0; i < errors.errorMessages.length; i++) {
                            let item = document.createElement('li');
                            let message = errorReportWindow.document.createTextNode(errors.errorMessages[i]);           
                            item.appendChild(message);
                            list.appendChild(item);;
                        }  
}
Run Code Online (Sandbox Code Playgroud)

该列表只不过是一个字符串数组:

errors.errorMessages = [
{'Message 1'},
{'Message 2'}
]
Run Code Online (Sandbox Code Playgroud)

此代码在Chrome和Firefox中正常工作,但在IE中生成新文档但列表从不附加到选定的元素.我可以看到生成的元素但它不会添加到新创建的文档中.

IE dev工具在内部捕获了一般的消息 Error: No such interface supported

我已经看到了类似问题的其他SO帖子,但没有适合我的场景的解决方案,因为我正在生成html,并且文档同时与使用现有文档.

编辑**:此代码虽然标准js是作为角度应用程序的一部分在typescript中编写的.TS生成为ECMA3,使用箭头函数或标准符号生成相同的结果.

我很欣赏有关我所缺少的任何建议或指示.

Con*_*Fan 5

要使其在 IE 11 中工作,您可以遵循Mirko Cianfarani 的建议:使用将附加这些元素的文档对象创建动态元素。在您的情况下,这是新报告窗口的文档,errorReportWindow.document. 报告文件也应在最后关闭。

var generateImportErrorReport = function(errors) {
  let doc = createHtmlErrorReport(errors);
  let errorReportWindow = window.open('', '_blank');
  let errorDoc = errorReportWindow.document; // Get the error report document object
  errorDoc.write(doc);
  let list = errorDoc.createElement('ul'); // Create with errorDoc
  // Builds a list of errors
  for (let i = 0; i < errors.errorMessages.length; i++) {
    let item = errorDoc.createElement('li'); // Create with errorDoc
    let message = errorDoc.createTextNode(errors.errorMessages[i]); // Create with errorDoc
    item.appendChild(message);
    list.appendChild(item);;
  }
  var errorList = errorDoc.getElementById('errorList');
  errorList.appendChild(list);
  errorDoc.close(); // Close the document
}
Run Code Online (Sandbox Code Playgroud)

您可以在这两个 plunker 中测试代码: