我打开一个新的空白标签页。现在，我需要在一个新的标签页中打开一个网站。我按照以下方法操作：在该标签页的控制台中，我写入：
var wild = window.open("https://css-tricks.com/", "mywin", '');
这很好。现在我可以访问这个新窗口，使用wild.document。现在我希望在该页面的DOM加载完成后执行一些代码。我使用onload事件：
function foo(){
var mytext = wild.document.body.textContent;
alert( mytext );
}
wild.addEventListener("load", foo);
但不幸的是，警报没有出现。我还尝试将事件监听器放在匿名自调用函数中，如这个答案中所解释的，但那也没用。我还尝试过ondomload事件，但不幸的是那也没用。所以，
为什么载入事件在使用window.open打开的标签上不起作用？如何让它正常工作？
如检测使用window.open打开的窗口的onload事件所述，以下演示可以正常工作：
var wild;
window.addEventListener('DOMContentLoaded', function(e) {
wild = window.open("myLocalStaticPage.html", "mywin", '');
wild[wild.addEventListener ? 'addEventListener' : 'attachEvent'](
(wild.attachEvent ? 'on' : '') + 'load', function (e) {
alert("loaded")
}, false);
});
// the following handler only used for test purposes
document.addEventListener('click', function(e) {
try {
alert(wild);
} catch(err) {
alert(err);
}
}, false);
我在源页面上添加了一个监听器，这样你就可以通过单击页面来测试wild变量的值。
对于静态页面没有问题。
但是，如果你需要打开经典的 "http://google.com/" 页面，你会看到，在起始页面上单击会出现以下错误：
而且，来自调试环境：
"content_scripts": [{
"matches": ["*://*/*"],
"js": ["content.js"],
"run_at": "document_end",
"all_frames": true
}],
其中的 "run_at" 参数：
控制 js 文件注入的时间。可以是 "document_start"、"document_end" 或 "document_idle" 中的任意一个。默认为 "document_idle"。
onload事件都无法正常工作。 - user31782<body>
<script type="text/javascript">
window.open('http://www.linktoyourotherpage.com/', 'mywin', '');
</script>
</body>
还有一个页面的脚本，用于操作文档。
<body onload="foo()">
<script type="text/javascript">
function foo() {
var mytext = document.body.textContent;
alert( mytext );
}
</script>
</body>
但事实证明，解释更简单。load事件确实发生了，但我没有看到有关它的控制台消息，因为...我正在查看打开者窗口/选项卡的控制台！我没有查看被打开的选项卡的控制台。
每个选项卡/窗口都有自己的调试器（-窗口）。来自选项卡的消息仅显示在其自己的调试器窗口的控制台中，而不是其他选项卡的控制台中。您可以打开多个调试器窗口，每个选项卡一个。这可能会让人感到困惑，因为很难知道哪个调试器窗口属于哪个浏览器窗口。
因此，在新选项卡中打开相同的URL后，我必须专注于该选项卡，然后打开一个新的调试器窗口，同时查看该选项卡。然后我才能在那个新的控制台中看到有关load事件处理程序的消息。我花了一些时间才弄清楚这一点，希望这可以帮助其他想知道为什么看不到onload事件的人。如果窗口打开，则事件可能确实发生了，您只是在查看错误的控制台。
是什么导致了我的困惑？可能是我们总是谈论“控制台”。这似乎意味着有（单个）“控制台”。但是可以同时打开多个控制台，显示不同的消息。
当然，这也适用于任何其他事件。仅仅因为你在查看的控制台上没有看到它的日志记录，并不意味着它没有发生。
当文档加载完成时，window.onload事件会触发。
var wild=null;
function load() {
if(wild !=null)
{
alert("load event detected! :"+wild.location.hostname+wild.location.pathname);
}
else
alert("not yet loaded");
}
window.onload = load;
wild = window.open("https://www.google.co.in/", "mywin", ''); // Security Exception raise due to Cross orgin security enabled google.co.in
// wild = window.open("https://localhost:5555/test.html", "mywin", ''); //This will work when same origin policy
console.log("After Loading ...");
function foo() {
var wild = window.open("http://google.com/", "mywin", '');
wild.addEventListener("load", function(){
var mytext = wild.document.body.textContent;
alert( mytext );
});
}
setTimeout函数代替onload函数，那么它就能完美地运行。所以我猜这不是因为同源策略的问题。 - user31782