首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >对于动态生成的html页面,IE 11忽略了appendChild()

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

Stack Overflow用户
提问于 2017-06-30 18:15:56
回答 1查看 4.2K关注 0票数 8

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

代码语言:javascript
复制
                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;

                }

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

代码语言:javascript
复制
<div id="errorList" style="padding:5px;"></div> 

下一个函数调用此方法并生成错误列表。

代码语言:javascript
复制
            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);;
                        }  
}

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

代码语言:javascript
复制
errors.errorMessages = [
{'Message 1'},
{'Message 2'}
]

这段代码在Chrome和Firefox中运行良好,但是在IE中生成了新文档,但是列表从未附加到选定的元素中。我可以看到生成的元素,但它不会添加到新创建的文档中。

在内部,IE工具捕获Error: No such interface supported的通用消息。

我也看到过其他类似的问题,但在我生成html和文档的同时,没有适合我的解决方案,而不是使用现有的文档。

编辑**:这段代码,而标准的js是作为一个角度应用程序的一部分用打字本编写的。TS以ECMA3的形式生成,使用箭头函数或标准表示法生成相同的结果。

对于我所缺少的东西,我希望有任何建议或建议。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-07-02 20:26:41

要使它在IE11中工作,您可以按照希安法拉尼的建议:创建带有这些元素将被附加到的文档对象的动态元素。在您的示例中,这是新报表窗口errorReportWindow.document的文档。报告文件也应在最后结束。

代码语言:javascript
复制
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
}

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

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/44852661

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档