无法添加事件侦听器答案

【问题标题】：Cannot Add Event Listener无法添加事件侦听器
【发布时间】：2020-06-29 05:24:37
【问题描述】：

我可以在下面的代码中为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 做了一些事情不让我这样做吗？有没有办法绕过它？

【问题讨论】：

我认为控制台上也抛出了一些异常。您能否检查并更新问题。
@AyushKatiyar 我个人没有收到任何错误。它只是默默地失败了☹️
它没有静默失败它被浏览器阻止。我已经在答案中提到了。

标签： javascript events onclick click event-listener

【解决方案1】：

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

【讨论】：

但是我的代码已经成功添加了一个事件监听器，用于点击blank。如果我转到空白窗口并在随机位置单击，则原始窗口会将这些单击记录到控制台。它只是不适用于推特
同源策略
有没有办法关闭它？

【解决方案2】：

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

【讨论】：

我现在明白了。这也是this 不起作用的原因吗？当我打开 twitter 网站并通过代码单击按钮时，我试图将 javascript 复制并粘贴到控制台中

【解决方案3】：

没有异常的原因：

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

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

或者给每个窗口一个new window name。

window.open(url, WindowName)

安全风险

你不能使用 JavaScript 添加不同来源的事件监听器，如果你能做到，那将是一个巨大的安全漏洞。对于same-origin policy 浏览器阻止脚本尝试访问具有不同来源的框架。

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

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

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

示例

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

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

不推荐

在您的浏览器中禁用同源策略

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

【讨论】：

非常感谢您非常清晰和有帮助的回答。这也是this 不起作用的原因吗？我试图在打开网站并通过 javascript 单击按钮时将一些 javascript 复制并粘贴到控制台中
@MinAndyChoi 您的解决方案存在 2 个问题。请参考答案我已经更新了我的答案。
@MinAndyChoi javascript.info/cross-window-communication的文章可以参考。