2016-08-01 25 views
1

Ergebnisse und HintergrundinformationenAufruf adoptNode und importNode auf einem untergeordneten Fenster nicht in IE und Edge-

Dank einer link I missed für den Hinweis auf unten in den Kommentaren user4749485. Wie von der Person, die es gemacht hat, darauf hingewiesen wird, scheint dies durch MS verursacht zu werden, die das HTMLElement in ein normales Objekt konvertiert, bevor es an eine Funktion von einem anderen Fenster übergeben wird, wie gezeigt wurde here. Ich nahm das Original etwas weiter und testete es auch auf einem iframe und fügte Tests für denselben Ursprung hinzu.


den Code aus this answer Modified ein Dokument Kontext zu nehmen. Es bestätigt weiterhin den Verdacht, dass der IE irgendwelche Knoten von externen Fenstern in ein einfaches Objekt konvertiert, bevor sie an eine Funktion übergeben werden. Ich habe this Plunkr mit dem neuen Test vonCustomImportNode aktualisiert.

Es wurde ein weiterer Test vonCustomImportNode2 hinzugefügt, der die benutzerdefinierte Importknotenfunktion auf das Zieldokument überträgt. Es macht einen Klon der Elemente, aber die Ereignisse werden nicht beibehalten. Erscheint, ich werde nur einen speziellen Fall machen müssen.


Eine andere example using angular, die fast funktioniert. Öffnet das Fenster, kopiert den Inhalt und schlägt beim $ compile fehl. Ich nehme an, es ist, weil es versucht, Knoten für die ngInlcude zu importieren oder zu übernehmen.


Frage

Ich versuche, Elemente aus dem aktuellen Fenster zu einem neuen Fenster zu bewegen, dass die Seite öffnet. Die folgenden Methoden funktionieren in allen Browsern mit Ausnahme von IE und Edge. Edge löst einen Fehler No such interface supported aus, und IE löst einen allgemeinen Fehler aus. This post besagt, dass das Problem darin besteht, dass mehrere Elemente aus einem Dokumentfragment hinzugefügt werden sollen. In meinem Testcode jedoch füge ich nur ein Element hinzu und es schlägt immer noch fehl. Interessant ist, dass es auch bei den Aufrufen importNode und adoptNode fehlschlägt. Gibt es Problemumgehungen, die die angehängten Daten und Listener beibehalten?

<!doctype html> 
<html> 
    <head> 
     <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
    <head> 
    <body> 
    <div id="test">test</div> 
    <button onclick="byHtml()">by html()</button> 
    <button onclick="byClone()">by clone()</button> 
    <button onclick="byDirect()">direct append</button> 
    <button onclick="byAdoptNode()">adoptNode()</button> 
    <button onclick="byImportNode()">importNode()</button> 
    <script> 
     function byHtml(){ 
      var nwin= window.open('about:blank','',''); 
      // Works but loses any bound listeners 
      $(nwin.document.body).append($('#test').html()); 
     } 
     function byClone(){ 
      var nwin= window.open('about:blank','',''); 
      // Fails in Edge and IE 
      $(nwin.document.body).append($('#test').clone()); 
     } 
     function byDirect(){ 
      var nwin= window.open('about:blank','',''); 
      var node= document.getElementById('test'); 
      // Fails in Edge and IE 
      nwin.document.body.appendChild(node); 
     } 
     function byAdoptNode(){ 
      var nwin= window.open('about:blank','',''); 
      // IE and Edge fail on the adoptNode 
      var node= nwin.document.adoptNode(document.getElementById('test')); 
      nwin.document.body.appendChild(node); 
     } 
     function byImportNode(){ 
      var nwin= window.open('about:blank','',''); 
      // IE and Edge fail on the importNode 
      var node= nwin.document.importNode(document.getElementById('test'), true); 
      nwin.document.body.appendChild(node); 
     } 
    </script> 
    </body> 
</html> 

EDIT

Ich habe die Artikel in this post aufgeführt versucht. Sie lösen das Problem nicht.

  • Die Seite wird von einem Server bedient.
  • Ich habe die about:blank mit einer leeren Zeichenfolge und einer URL zu einer visuell leeren HTML-Seite auf dem gleichen Server ersetzt. Das Problem wurde nicht gelöst.
  • IE war immer im Standardmodus. adoptNode und importNode waren nie undefiniert. Sie warfen "Keine solche Schnittstelle unterstützt" -Fehler.

EDIT 2
Plunker test mit den oben genannten Änderungen. HINWEIS: Der Plunker gibt mir einen anderen Fehler in IE 11 als der Code auf meinem Server ausgeführt wird. Der Plunker löst einen nicht unterstützten Fehler aus.
Edge wirft immer noch die No such interface supported error

+0

[importNode] (https://developer.mozilla.org/en-US/docs/Web/API/Document/importNode) ist seit IE unterstützt 9. (Hauptunterschied to adoptNode ist, dass Klone der ursprüngliche Knoten ist, also, wenn Sie es aus dem Originaldokument entfernt haben möchten, müssen Sie dies explizit später tun.) – CBroe

+0

Richtig. IE und Edge werfen jedoch einen Fehler auf "ImportNode" und "AdoptNode". Der Fehler ist "Keine solche Schnittstelle unterstützt" – Knyri

+1

Es ist wahrscheinlich "about: blank", die Ihr Problem verursacht, da es nicht in der gleichen Domäne wie Ihr aktuelles Dokument ist. Versuchen Sie, die URL für eine leere HTML-Datei auf Ihrem Server anzugeben. –

Antwort

0

Die Lösung ist nicht schön. Sie müssen es kompilieren, den HTML-Inhalt abrufen, alle Vorkommen von ngInclude entfernen, es in ein DIV umbrechen, die HTML-Zeichenfolge an das neue Fenster anhängen und es erneut kompilieren.

Plnkr: http://plnkr.co/edit/aGpN3LHllU2ReHp1zG26?p=preview

$scope.window= window.open('', '', ''); 
var windowScope= $scope.$new(); 
var body= angular.element($scope.window.document.body); 
var contents= $compile($element.contents())(windowScope); 
setTimeout(function(){ 
    // The div is needed 
    // http://stackoverflow.com/a/38599093/631295 
    body.append('<div>'+$element.html().replace(/ng-include="[^"]+"/g,'')+'</div>'); 
    windowScope.$destroy(); 
    windowScope= $scope.$new(); 
    $compile(body)(windowScope); 
}, 1000);