2017-06-30 22 views
6

Tôi đang cố tạo báo cáo giả cho tôi thấy lỗi nhập dữ liệu. để thực hiện điều này, tôi có hai chức năng:IE 11 đang bỏ qua appendChild() cho các trang html được tạo động

   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; 

       } 

Ở trên tôi tạo một tài liệu mới, thêm một số kiểu cơ bản và sau đó tạo vùng chứa div nơi tôi muốn danh sách lỗi được chèn vào.

<div id="errorList" style="padding:5px;"></div> 

Chức năng tiếp theo gọi phương pháp này và xây dựng danh sách lỗi

  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);; 
         } 
} 

Danh sách này là gì khác hơn là một mảng của chuỗi:

errors.errorMessages = [ 
{'Message 1'}, 
{'Message 2'} 
] 

Mã này hoạt động tốt trong Chrome và Tuy nhiên Firefox trong IE tài liệu mới được tạo nhưng danh sách không bao giờ được nối thêm vào phần tử đã chọn. Tôi có thể thấy phần tử được tạo nhưng nó sẽ không thêm vào tài liệu mới được tạo ra.

Bên trong những công cụ dev IE chụp một thông điệp chung chung của Error: No such interface supported

Tôi đã nhìn thấy SO đăng khác của vấn đề tương tự nhưng không có giải pháp phù hợp với kịch bản của tôi như tôi đang tạo ra html, và tài liệu cùng một lúc so với làm việc với tài liệu hiện có.

Chỉnh sửa **: Mã này trong khi js chuẩn được viết bằng chữ viết như một phần của ứng dụng góc. TS được tạo ra dưới dạng ECMA3 và sử dụng các chức năng mũi tên hoặc ký hiệu chuẩn sẽ tạo ra kết quả tương tự.

Tôi đánh giá cao bất kỳ đề xuất hoặc gợi ý nào về những gì tôi bị thiếu.

+0

Đây là một câu hỏi thực sự thú vị nhưng có không có cách nào để nhìn vào động cơ bố trí của Edge vì nó độc quyền. Tôi sẽ nói đó là một lỗi vì MS tự thông báo rằng EdgeHTML (công cụ bố trí) sẽ làm cho bất kỳ trang nào tốt mà Webkit hoặc Blink có thể làm (Safari và Chrome). – Li357

Trả lời

3

Để làm cho nó hoạt động trong IE 11, bạn có thể theo dõi Mirko Cianfarani's suggestion: tạo các phần tử động với đối tượng tài liệu mà các thành phần này sẽ được nối thêm. Trong trường hợp của bạn, đó là tài liệu của cửa sổ báo cáo mới, errorReportWindow.document. Tài liệu báo cáo cũng phải được đóng vào cuối.

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 
} 

Bạn có thể kiểm tra mã trong hai plunkers này:

Các vấn đề liên quan