3

ボタンがクリックされたときに新しいウィンドウを開き、このウィンドウのコンテンツを開いているウィンドウに追加しています。使用しているjqueryコードは次のとおりです。

    $(".printBtn").on("click", function () {
        var w = window.open("", "Purchase Report", "width=800, height=1100");
        var wi = $(window);

        $(w.document.body).append(wi.find("#datatable_example"));

        return false;
    });

問題は、新しいウィンドウが開きますが、親ウィンドウのコンテンツが新しく開いたウィンドウに追加されていないことです。次に、追加しようとしましwi.find("#datatable_example").html()たが、それも機能しませんでした。

誰でも見て、私がここで間違っていることを教えてもらえますか?

アップデート

「重複した質問」から次のことを試しましたが、うまくいきませんでした：

    $(".printBtn").on("click", function () {
        var w = window.open("", "Purchase Report", "width=800, height=1100");

        $(w.document).ready(function () {
            $(w.document.body).contents().append($(window).find("#datatable_example"));
        });

        return false;
    });
4

2 に答える 2

0

問題の根本は、外部ドメインの負荷イベントを観察できない同じオリジン ポリシーです。SO の閲覧中に開発者コンソールでこれを試すと、すべて問題ありません。

var child = window.open( 'http://stackoverflow.com' );

child.onload = function() { 
   alert( 'Popup loaded!' ); // Fired!
};

ただし、他のドメインからページを開こうとすると失敗します。

var child = window.open( 'http://stackexchange.com' );

child.onload = function() { 
   // It's not gonna be fired unless you run it from stackexchange.com.
   alert( 'Popup loaded!' ); 
};

window.open()ドメインの範囲外にあるページを呼び出したりwindow.open( '' )、読み込もうとしたりすると、同じことが起こりますabout:blank。そのため、ブラウザーは添付イベントを発生させません ( child.addEventListener( 'load' ). また、プロトコルも一致する必要があることに注意してください。

この回避策では、別の JS スレッドでコールバックを実行することを導入setTimeoutします。うまくいけば、その時点で DOM の準備が整うのに十分遅くなります。

var child = window.open();

setTimeout( function() {
    var doc = child.document,
        p = doc.createElement( 'p' );

    p.innerHTML = 'Hello world!';
    doc.body.appendChild( p );
} );

最新の Chrome では動作しますが、このようなエッジ ケースでは、さまざまなブラウザーが奇妙な動作をすることがあるため、このコードをより大きな遅延、順次チェックなどで調整する必要がある場合があります。

そのような回避策が製品コードに適しているかどうか知りたいので、うまくいったかどうか教えてください ;)

于 2013-08-12T12:18:20.243 に答える