将事件侦听器附加到与当前域不同的域

Posted 2023-03-04

【中文标题】将事件侦听器附加到与当前域不同的域

【英文标题】：Attach event listeners to different domain from current domain

【发布时间】：2016-07-14 16:06:03

【问题描述】：

我正在做一些项目，其中我有一个如下所述的场景

父域：www.exampledomain.com

子域：www.someotherdomain.com

例如，我的父域是 www.exampledomain.com 在我的父域中我有一个名为 capture 的按钮单击此按钮我是使用 javascript 在新选项卡中加载具有 URL www.someotherdomain.com 的子域

除了在新选项卡中加载子域 URL 外，我还尝试将事件侦听器从父域附加到子域。

我正在尝试捕获在父域中的子域中执行的所有点击操作。

我知道 CORS，但我想使用 JavaScript 来实现。

有可能吗？任何指针都非常感谢。

【问题讨论】：

您可以将其作为 chrome 扩展或 firefox 插件来实现，并不理想但值得一提

【参考方案1】：

浏览器不允许您以任何方式直接访问包含其他域页面的浏览器窗口（出于安全原因）。因此，您根本无法直接将事件侦听器添加到任何域的页面。

您可以做的是让两个页面合作（根据理论，如果它们专门合作在一起，那么它必须是安全的）。但是，即使在合作的情况下，你也不能让域 A 的页面将事件监听器添加到域 B 的页面中。你做不到。

您可以使用window.postMessage() 向另一个窗口发送某种命令，然后另一个窗口自己执行 DOM 操作。您可以发送window.postMessage() 以从另一个窗口请求一些信息，然后另一个窗口将监听您的特定请求，获取该信息并将数据发回。这种结构显然需要两个完全合作的页面。出于安全原因，您可以（并且应该）限制您愿意接受来自哪些域的消息。有关详细信息，请参阅MDN doc for window.postMessage()。

关于您的具体问题：

我正在尝试捕获在子项中执行的所有点击操作 父域中的域。

您无法从父域执行此操作。您可以从父域向子域发送一条消息，要求子域在其自身上设置请求的点击处理程序，然后在每次点击发生时发送给 window.postMessage() 您的数据。大部分工作必须在子窗口内用自己的代码完成。

【讨论】：

如果我无法控制要打开的子域怎么办。我不能从中得到任何东西吗？

@Santhosh_Reddy - 不。浏览器明确禁止客户端 Javascript 访问另一个域中的页面。这就是安全模型。如果您想访问该内容，您将需要一个服务器来为您获取它。

@Santhosh_Reddy - 或者您可以使用用户专门安装的浏览器插件。