无法添加事件侦听器

Question

我可以在下面的代码中为点击添加一个事件侦听器，blank但不是twitter。const blank = window.open();const twitter = window.open("https://twitter.com");const PrintClick = function (name) {    return function (...args) {        console.log(name, ...args);    };};blank.addEventListener("click", PrintClick("blank"));twitter.addEventListener("click", PrintClick("twitter"));是因为 twitter 做了一些事情不让我这样做吗？有办法绕过它吗？

Answer 1

你没有得到任何异常的原因：

大多数浏览器不支持多个弹出窗口，因此为了完成它，您需要尝试使用：

window.open(yoururl,"_blank",'PopUp',randomnumber,'scrollbars=1,menubar=0,resizable=1,width=850,height=500');

或者给每个窗口一个新的窗口名称。

window.open(url, WindowName)

安全风险

您不能使用 JavaScript 添加具有不同来源的事件侦听器，如果您可以这样做，那将是一个巨大的安全漏洞。对于同源策略 ，浏览器会阻止脚本尝试访问具有不同源的框架。

如果未维护地址的以下部分中的至少一个，则认为来源不同：

<protocol>://<hostname>:<port>/...

如果要访问框架，协议、主机名和端口必须与您的域相同。

例子

以下是尝试访问以下 URL 时会发生的情况http://www.example.com/home/index.html

URL                                             RESULT 

http://www.example.com/home/other.html       -> Success 

http://www.example.com/dir/inner/another.php -> Success 

http://www.example.com:80                    -> Success (default port for HTTP) 

http://www.example.com:2251                  -> Failure: different port 

http://data.example.com/dir/other.html       -> Failure: different hostname 

https://www.example.com/home/index.html:80   -> Failure: different protocol

ftp://www.example.com:21                     -> Failure: different protocol & port 

https://google.com/search?q=james+bond       -> Failure: different protocol, port & hostname 

不建议

在浏览器中禁用同源策略

我将链接相对答案。但是请记住，禁用同源策略只会影响您的浏览器。此外，在禁用同源安全设置的情况下运行浏览器会授予任何网站对跨源资源的访问权限，因此这是非常不安全的，如果您不确切知道自己在做什么（例如开发目的），则永远不要这样做。

Answer 2

出于安全原因，浏览器会禁用您不拥有的域之间的任何交互。想象一下一个人可以用它做的所有事情。

Answer 3

addEventListener 只能监听当前页面的dom对象，可以考虑selenium自动化框架操作