触发点击 iframe答案

【问题标题】：Trigger click on iframe触发点击 iframe
【发布时间】：2023-04-04 14:34:01
【问题描述】：

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

无论如何，我有一个幻灯片 (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

现在让我感到困惑的部分。 click 事件仅在我单击 iframe 以外的其他位置时才触发 iframe 焦点事件。也就是加载页面后，如果我直接点击iframe，控制台不记录test。如果我在框架之外单击，或者在浏览器中单击另一个选项卡，或者在其他任何地方，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 并触发事件，而无需事先单击其他任何内容。

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

【问题讨论】：

标签： javascript jquery events dom iframe

【解决方案1】：

编辑：

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

FIDDLE

添加另一个元素来设置焦点怎么样：

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

FIDDLE

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

FIDDLE

【讨论】：

感谢您的回答。页面上实际上已经有一个输入，我之前尝试过这个，当我首先关注它时它就可以工作。它可能与自动对焦的其他形式可能会与此冲突，因此这是不得已的解决方案。
是的。我本可以发誓我已经尝试过了……有趣的是，$(window).focus() 不起作用。我会暂时接受你的回答。首先，我希望有人尝试解释为什么会这样。
@jefffabiny - 我也尝试了 jQuery 版本，但没有成功，但由于某种原因，本机版本似乎可以工作。 jQuery 可能会进行一些内部检查，以避免在它认为是不可聚焦的元素上调用焦点以避免错误。

【解决方案2】：

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

【讨论】：

这是一个潜在的解决方案。事实上，我们同时使用这两种服务，而且未来可能还会使用更多。因此，如果我找不到更好的东西，这将起作用。无论如何，我很好奇为什么浏览器会这样。
当我写视频扩展时，我必须为AnythingSlider 这样做。

【解决方案3】：

可能是一种解决方法：

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

【讨论】：