Question

当点击一个按钮然后将此窗口中的内容附加到已打开的窗口时，我打开一个新窗口，我正在使用的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;
    });

Answer 1

问题是，我使用的是var wi = $(window)而不是var wi = $(window.document)。这是工作代码：

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

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

    return false;
});

Answer 2

问题的根源是相同的原始策略，不允许您观察外部域的加载事件。如果您在浏览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' )）相同。另请注意，协议也必须匹配。

该变通方法引入了setTimeout来在一个单独的JS线程中运行回调，希望在那时能够准备好DOM：

var child = window.open();

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

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

在最新的Chrome浏览器中，它适用于我，但不同的浏览器在这种边缘情况下有时会做一些奇怪的事情，因此如果在您的情况下失败，您可能需要更长时间地调整此代码，顺序检查或其他内容。

所以请继续告诉我们它是否适合您，因为我很好奇这种解决方法是否适用于生产代码;）

从子窗口访问父窗口的内容

2 个答案: