Question

我知道同源政策......只是让它不受影响。

无论如何，我有一个幻灯片（slide.js），里面有一些嵌入的视频。当用户点击视频时，我希望幻灯片暂停。来自iframe内部的事件不会触发，所以我正在努力解决这个问题。现在我有一个部分解决方案。我在blur上检测到window事件，如果新聚焦的元素是iframe，那么我会暂停幻灯片显示：

$(window).blur(function(event){
    console.log(event.target);
    if($('iframe').is(':focus')){
        //clicked inside iframe
        console.log('test');
    }
    console.log('document.activeElement is:');
    console.log(document.activeElement);
    console.log('\n');
});

加载页面后，我在控制台中得到了这个：

document.activeElement is:
BODY

现在让我困惑的部分。当我点击而不是iframe第一个之外的其他位置时，点击事件才会触发iframe焦点事件。也就是说，在加载页面后，如果我直接单击iframe，则控制台不会记录测试。如果我在框架外部或浏览器中的其他选项卡或其他任何位置单击，则会触发blur事件。之后，如果我点击iframe，那么我将在控制台中进行测试：

加载页面后，我点击其他标签，然后返回原始标签：

Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}
document.activeElement is: 
<body class="full">...</body>

然后我点击iframe：

Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}
test
document.activeElement is: 
<iframe>...</iframe>

为什么???

我甚至把它放在一切之前，它没有帮助：

$(window).focus();

但是，如果我这样做，它会起作用：

$('input').focus();

如果输入是聚焦的，那么我可以点击iframe并触发事件，而不必事先点击任何其他内容。

帮助我，你是我唯一的希望......

Answer 1

可能是一种解决方法：

$(window).load(function () {
    $('body').prop('tabindex', -1).focus();
});

Answer 2

修改

实际上，只使用原生的window.focus()似乎对我有用：

FIDDLE

如果只是添加另一个元素来将焦点设置为：

$('<input>', {type: 'text', style: 'top: -10000px; position: absolute', autofocus:true} ).appendTo('body') .focus(); // just to make sure

FIDDLE

如果可以的话，我会将带有自动对焦的输入元素直接添加到标记中，这样就可以在第一次点击时触发模糊事件。

FIDDLE

Answer 3

根据您使用的视频服务，最好使用他们的视频API。然后，可以获取视频事件，并确切知道何时暂停和/或恢复幻灯片。

YouTube API（demo）

<script src="http://www.youtube.com/iframe_api"></script>

Vimeo API（很好demo使用Froogaloop）

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

触发点击iframe

3 个答案: