从子窗口访问父窗口内容

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

- Kamran Ahmed

---

专业提示：如果您想检查选择器是否匹配到任何内容，请查看长度（如果未找到任何内容，则长度为0）：console.log(wi.find("#datatable_example").length)。 - xec

可能是重复的问题：如何访问子窗口的DOM树？ - oleq

@oleq！为什么呢？我使用完全不同的方法来实现这个目标。

• 打开一个空的URL窗口，即一个没有内容的窗口，因此它不需要加载任何时间，对吧？
• 我正在尝试访问父窗口的内容，它与子窗口没有关系，但我仍然遇到了问题，无法检索子窗口。

- Kamran Ahmed

@KamranAhmed 工程师。抱歉，你是对的。我在下面发布了一个答案。 - oleq

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

- Kamran Ahmed

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中，它对我有效，但是不同的浏览器有时会在这种边缘情况下做出奇怪的事情，因此如果在您的情况下失败，您可能需要使用更大的延迟、顺序检查或其他方法来调整此代码。

所以，请告诉我们它是否对您有效，因为我很好奇这样的解决方法是否适用于生产代码 ;)

- oleq