Javascript：向在新窗口中打开的文档添加事件侦听器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30040441/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript: Add event listener to document opened in new window
提问by Izabela
Is there anything that prevents me from adding a event listener to the window that results from a window.open() call?
有什么阻止我向 window.open() 调用产生的窗口添加事件侦听器吗？
I am trying to set a handler function to be triggered on a visibility change event on the new document, but this handler function is not being called.
我正在尝试设置一个处理程序函数，以在新文档的可见性更改事件上触发，但未调用此处理程序函数。
回答by
There's nothing that prevents you from doing that (as long as the window you are opening is in the same domain as the parent/opener window; Just imagine what malicious people could do if that weren't the case).
Once you have the windowobject of that new window, then you can do whatever you want to it. window.open()returns the windowobject of the new window:
没有什么可以阻止您这样做（只要您打开的窗口与父/打开器窗口在同一个域中；想象一下，如果不是这种情况，恶意的人会做什么）。一旦你有了window那个新窗口的对象，你就可以对它做任何你想做的事情。window.open()返回window新窗口的对象：
// * All of this code is happening inside of the parent window,
// * but you can also 'inject' scripts into the new window if you wish.
// window.open() returns the new window's window object
var newWin = window.open('http://stackoverflow.com');
// Run all of your code onload, so you can manipulate the
// new window's DOM. Else, you're just manipulating an empty doc.
newWin.onload = function () {
// `this`, in this context, makes reference to the new window object
// You can use DOM methods, on the new document, with it.
var myElem = this.document.getElementById('custom-header');
console.log("Window object: ", this);
console.log("Window's location: ", this.location.href);
console.log("Id of element in new window: ", myElem.id);
// Attach a click event to the new document's body
this.document.body.onclick = function () {
// `this`, inside of a listener, is the element itself
// but this console.log will log inside of the parent window
console.log(this);
this.style.transition = 'all 1s';
this.style.opacity = 0;
};
this.document.body.addEventListener('click', function () {
// Now, let's log inside of the new window.
// Since in here, this === this.document.body,
// then you'll have to use the newWin var we set before.
// newWin is the window object.
newWin.console.log('Logging in new window!');
});
};
