在iframe上触发点击

我知道同源策略，只是想方设法。在iframe上触发点击

无论如何，我有一个幻灯片（slide.js），它有一些嵌入的视频。当用户点击视频时，我希望幻灯片暂停播放。来自iframe内部的事件不会触发，所以我试图解决这个问题。现在我有一个部分解决方案。我发现在window一个blur事件，如果新的焦点内容是iframe然后我暂停播放幻灯片：

document.activeElement is: 
BODY

现在部分：

$(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'); 
});

我在控制台中看到此页面加载后令我困惑。单击事件仅在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并触发事件，而不必事先点击其他任何东西。

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

来源

2013-05-14 smilebomb

编辑：

其实，只要使用本地window.focus()似乎工作对我来说：

FIDDLE

如何只追加一个新元素，将焦点设置到：

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

FIDDLE

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

FIDDLE

来源

2013-05-14 18:16:53 adeneo

谢谢您的回答。实际上页面上已经有了一个输入，而且我之前已经尝试了这个输入，并且在我首先关注它的时候它就起作用了。它可能与自动对焦的其他形式可能会与此冲突，所以这是最后的解决办法。 – smilebomb 2013-05-14 18:20:09

@jefffabiny - 编辑我的答案，这是否适合你？ – adeneo 2013-05-14 18:24:04

是的。我可以发誓我已经尝试过那个......有趣的是，$（window）.focus（）不起作用。我会暂时接受你的回答。首先，我希望有人尝试解释为什么会发生这种情况。 – smilebomb 2013-05-14 18:27:48

可能是一个解决办法：

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

来源

2013-05-14 18:09:28

根据您所使用的视频服务，这将是最好使用他们的视频API。那么你可以获得视频事件，并确切地知道何时暂停和/或恢复您的幻灯片。

YouTube API（使用Froogaloop不错demo）（demo）

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

Vimeo API

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

来源

2013-05-14 18:18:40 Mottie

这是一个潜在的解决方案。实际上，我们都使用这些服务，并且可能更多。所以，如果我找不到更好的东西，这将工作。无论如何，我很好奇浏览器为什么这样做。 – smilebomb 2013-05-14 18:22:53

当我编写视频扩展时，我必须为[AnythingSlider]（http://css-tricks.github.io/AnythingSlider/video.html）执行此操作。 – Mottie 2013-05-14 18:25:02

在iframe上触发点击

回答

相关问题