4

我知道同源政策......只是把它排除在外。

无论如何，我有一个幻灯片（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，控制台不记录test。如果我在框架外单击，或者在浏览器中的另一个选项卡或其他任何地方单击，事件将触发。之后，如果我单击 iframe，那么我会在控制台中进行测试：iframeblur

加载页面后，我单击另一个选项卡，然后返回原始选项卡：

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 并触发事件，而无需事先单击任何其他内容。

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

4

3 回答 3

0

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

  • YouTube API（演示）

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

  • Vimeo API（使用 Froogaloop的不错的演示）

    <script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
于 2013-05-14T18:18:40.190 回答
0

Could be a workaround:

$(window).load(function () {
    $('body').prop('tabindex', -1).focus();
});
于 2013-05-14T18:09:28.727 回答
0

编辑：

实际上，仅使用本机window.focus()似乎对我有用：

小提琴

如何仅附加另一个元素以将焦点设置为：

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

小提琴

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

小提琴

于 2013-05-14T18:16:53.100 回答