IE 11 ignoruje appendChild() dla dynamicznie generowanych stron html

Próbuję utworzyć pseudo raport, który pokazuje mi błędy z importowania danych. do tego mam dwie funkcje:IE 11 ignoruje appendChild() dla dynamicznie generowanych stron html

   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; 

       }

W powyższym utworzyć nowy dokument, dodać kilka podstawowych stylizacji, a następnie utworzyć kontener div, gdzie chcę się lista błędów do wstawienia.

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

Kolejna funkcja nazywa tę metodę i buduje lista błędów

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

Lista jest niczym więcej niż tablicy ciągów:

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

Ten kod działa poprawnie w Chrome i Firefox jednak w IE generowany jest nowy dokument, ale lista nigdy nie jest dołączana do wybranego elementu. Widzę wygenerowany element, ale nie doda go do nowo utworzonego dokumentu.

wewnętrznie narzędzi IE dev oddaje ogólny przekaz Error: No such interface supported

Widziałem inne tak Komentarze od podobnych problemów, ale bez rozwiązania, które pasuje do mojego scenariusza jak ja generowania HTML i dokumentów w tym samym czasie kontra praca z istniejącym dokumentem.

Edytuj **: ten kod, gdy standardowy js jest napisany w maszynopisie jako część aplikacji kątowej. TS jest generowany jako ECMA3 i użycie funkcji strzałek lub standardowej notacji generuje taki sam wynik.

Byłbym wdzięczny za wszelkie sugestie lub wskazówki na temat tego, czego mi brakuje.

Źródło

2017-06-30 rlcrews

Jest to bardzo ciekawe pytanie, ale nie w ogóle nie można zajrzeć do układu graficznego Edge, ponieważ jest on zastrzeżony. Powiedziałbym, że to błąd, ponieważ MS ogłosił, że EdgeHTML (silnik układu graficznego) renderowałby jakąkolwiek stronę, jaką mógłby mieć Webkit lub Blink, które robią (Safari i Chrome). – Li357

Aby działało w IE 11, można śledzić Mirko Cianfarani's suggestion: tworzyć dynamiczne elementy z obiektem dokumentu, do którego te elementy zostaną dołączone. W twoim przypadku jest to dokument nowego okna raportu, errorReportWindow.document. Dokument raportu powinien również zostać zamknięty na końcu.

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 
}

można przetestować kod w tych dwóch plunkers:

This plunker wykorzystuje swój oryginalny kod
This plunker wykorzystuje kod znajdujący się powyżej

Źródło

2017-07-02 20:26:41 ConnorsFan

IE 11 ignoruje appendChild() dla dynamicznie generowanych stron html

Odpowiedz

Powiązane problemy