2016-08-01 9 views
1

調査結果およびサポート情報以下のコメントでlink I missedを指摘してuser4749485にはIEとエッジ

おかげで失敗します。それを作った人が指摘したように、これは、MSがHTMLElementを別のウィンドウの関数に渡す前に通常のObjectに変換して、hereというように引き起こされたようです。私はオリジナルをもう少し遠くに持って、iframeでそれをテストし、同じ起源のテストを追加しました。


this answerからコードを変更してドキュメントのコンテキストを取得しました。さらに、IEが関数に渡す前に、IEが外部ウィンドウの任意のノードをプレーンオブジェクトに変換するという疑いを確認します。私は新しいテストbyCustomImportNodeでthis Plunkrを更新しました。

カスタムインポートノード機能をターゲットドキュメントに追加する別のテストであるCustomInmportNode2を追加しました。要素のクローンを作成しますが、イベントは保持されません。私はちょうど特別な場合を作らなければならないだろう。


もう1つはexample using angularです。ウィンドウを開き、内容をコピーし、$コンパイルに失敗します。私はそれがインポートを使用しようとしているか、ngInlcudeのためにノードを採用しようとしていると仮定します。


質問

私はページが開き、新しいウィンドウに現在のウィンドウから要素を移動しようとしています。以下のメソッドは、IEとEdge以外のすべてのブラウザで機能します。 EdgeはNo such interface supportedエラーをスローし、IEは一般的なエラーをスローします。 This postには、ドキュメントフラグメントから複数の要素を追加しようとしているという問題があることが記載されています。しかし、私のテストコードでは、要素を1つだけ追加していますが、まだ失敗しています。興味深いのは、importNodeadoptNodeコールでも失敗するということです。添付されたデータとリスナーを保持する回避策はありますか?

<!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

私はthis postに記載されている項目を試してみました。彼らは問題を解決しません。

  • ページがサーバーから提供されています。
  • about:blankを、空白の文字列とURLの両方を、同じサーバー上の視覚的に空白のHTMLページに置き換えました。どちらも問題を解決しませんでした。
  • IEは常に標準モードになっていました。 adoptNodeとimportNodeは決して定義されませんでした。彼らは「No such interface supported」というエラーを投げた。上記編集と

EDIT 2
Plunker test注: Plunkerは私のサーバー上で実行されているコードとはIE 11で違うエラーを返します。 Plunkerは、サポートされていないエラーをスローします。
エッジが依然としてNo such interface supported errorを投げます。

+0

[importNodeの(https://developer.mozilla.org/en-US/docs/Web/API/Document/importNode)に支持されているIE 9(メイン差がadoptNodeは元のノードをクローンしているので、元の文書から削除したい場合は、明示的に後で行う必要があります。 – CBroe

+0

右。しかし、IEとEdgeは 'importNode'と' adoptNode'にエラーを投げます。エラーは 'No such interface supported'です。 – Knyri

+1

あなたの現在のドキュメントと同じドメインにないので、あなたの問題を引き起こしている可能性が高い" about:blank "でしょう。サーバー上の空のHTMLファイルにURLを指定してみてください。 –

答えて

0

解決策はかなりありません。コンパイルしてHTMLコンテンツを取得し、ngIncludeをすべて削除し、DIVでラップし、HTML文字列を新しいウィンドウに追加し、再度コンパイルする必要があります。

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); 
関連する問題