捕获跨域 iframe 事件

Question

我在域 A 有一个网站，其中包含一个用于显示视频的 iframe，该视频托管在 YouTube 上。在 iframe 加载事件中，我试图在 iframe 中注册 keyup 事件，以便在客户端按下退出键时关闭视频。这是我的代码示例：

$(myIFrame).bind('load', function() {
    $(myIFrame.contentWindow.document).keyup(function(event) {
        console.log(event.keyCode);
    });
    alert('Event Registered');
});

我遇到以下异常：

火狐：Error: Permission denied to access property "document"
铬：Uncaught SecurityError: Blocked a frame with origin "A" from accessing a frame with origin "https://www.youtube-nocookie.com". Protocols, domains, and ports must match.

有没有办法在跨域 iframe 中注册事件？

Answer 1

Same Origin Policy 阻止您这样做。

源由方案、端口、协议和域组成。如果这些匹配，则可以使用 JavaScript 来注册事件或操作 DOM。

如果您的网站是 http://example.com 并且视频是在 http://example.org 上，那么跨域脚本将不可能，因为域不匹配。

不同的来源可以进行通信，但是它们都需要选择启用此功能。 postMessage 就是这样一种 JavaScript 函数。但是，由于您无法控制运行视频的来源，因此在这里无法为您提供帮助。

您的解决方案可能是在您的页面上显示内嵌视频。这应该使您能够捕获事件。