Question

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

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

我收到以下例外情况：

Firefox：Error: Permission denied to access property "document"
Chrome：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函数。但是，由于您无法控制运行视频的原点，因此无法帮助您。

在解决方案上，您可能会在页面上显示内嵌视频。这应该可以捕获事件。

捕获跨源iframe事件

1 个答案: