Question

我正在使用Javascript打开一个空白窗口，用最小的填充它并注入一个脚本标记以包含JQuery，但是窗口属性readyState永远不会超过加载，因此JQuery永远不会触发。这是demo on jsFiddle。我无法弄清楚为什么弹出窗口不会更新其readyState。

var popup = window.open("", "popup", "height=500,width=700");
var doc = popup.document;
doc.write("<!doctype html><html><head></head><body></body></html>");
var script = doc.createElement("script");
script.type = "text/javascript";
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";
script.onload = function() {
  console.log(doc.readyState);
  popup.$(document).ready(function() {
    console.log(doc.readyState);
  });
}
doc.getElementsByTagName("head")[0].appendChild(script);

以下是没有JQuery的类似代码 - 与readyState窗口属性相同的问题永远不会超出“加载”。

var popup = window.open("", "popup", "height=500,width=700");
var doc = popup.document;
doc.write("<!doctype html><html><head></head><body></body></html>");
console.log(doc.readyState);

Answer 1

如果您从未设置过URL，那么就绪状态不会改变。它将被“初始化”或“加载” - 取决于您的浏览器。您可以通过在弹出窗口的控制台窗口中设置document.location来查看此更新，如下面的命令：

console.log(document.readyState);
document.location = "http://yourdomain.com";
console.log(document.readyState);

如果您将位置发送到域以外的域，则无法修改窗口对象。解决这个问题的一种方法是使用iframe并设置源代码 - 就像这样：

var nw = window.open('', "MyWindowID", "fullscreen=no, toolbar=no, menubar=no,status=no,location=no");
var html = '<iframe id="document-{aid}" style="width:100%;height:100%;" src="http://www.google.com"></iframe>';
nw.document.write(html);
nw.focus();

请参阅：https://stackoverflow.com/a/1443839/1220302

关于此问题的一个注意事项是尝试将您的弹出窗口包装在$（弹出窗口）中并挂钩就绪事件。

这应该适合你：

var popup = window.open("", "popup", "height=500,width=700");
var doc = popup.document;
doc.write("<!doctype html><html><head></head><body></body></html>");
var script = doc.createElement("script");
script.type = "text/javascript";
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";    
$(popup).ready(function(){
    console.log('loaded');
});

Answer 2

因为popup没有网址，所以立即就绪了。在window.open命令完成后，使用jQuery对其进行“准备”的任何赋值变得无关紧要。它永远不会开火，因为它已经太晚了。

Javascript弹出窗口文档永远不会“准备好”

2 个答案: