在 iframe 上触发点击事件

Question

在 iframe 上触发点击事件

4

我知道同源策略...只是想先说明一下。

无论如何，我有一个幻灯片展示（slide.js），其中包含一些嵌入式视频。当用户单击视频时，我希望幻灯片展示暂停。从 iframe 内部触发的事件不起作用，因此我正在尝试解决这个问题。现在我有了一个部分解决方案。我在 window 上检测到 blur 事件，如果新聚焦的元素是 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 并触发事件，而不必事先单击其他任何内容。

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

- smilebomb

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- A. Wolff · Answer 1

可能有一个解决方法：

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

- adeneo · Answer 2

编辑：

实际上，对我来说，只是使用本地的window.focus()似乎就可以了：

FIDDLE

可以考虑添加一个元素以设置焦点：

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

演示

如果可以的话，我会直接将 autofocus 输入元素添加到标记中，这样模糊事件总是在第一次单击时触发。

演示

- Mottie · Answer 3

根据您使用的视频服务，最好使用其视频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>