捕获跨源iframe事件

时间:2015-05-27 15:30:52

标签: javascript jquery security youtube

我在域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中注册事件?

1 个答案:

答案 0 :(得分:2)

Same Origin Policy阻止你这样做。

原点包括方案,端口,协议和域。如果这些匹配,那么JavaScript可用于注册事件或操纵DOM。

如果您的网站为http://example.com且视频位于http://example.org,则无法跨域编写脚本,因为域名不匹配。

可能会有不同的来源进行通信,但是他们都需要选择此功能。 postMessage就是这样一个JavaScript函数。但是,由于您无法控制运行视频的原点,因此无法帮助您。

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