防止iframe使用jquery保持焦点

Question

背景：

我正在帮助一个有混合媒体幻灯片放映的老朋友，幻灯片中的一张是嵌入了lytro相机图像的iframe（它是交互式的，您可以单击或点击移动设备来更改焦点）。

问题：

我遇到的问题是，当您与iframe进行交互时，它会将键盘的焦点移到台式机上，并且阻止了箭头键允许您更改幻灯片。

我尝试过的

我对此的主要攻击角度是试图使用jquery设置一个计时器，该计时器定期将焦点设置在父文档上，以从iframe中移除焦点并允许正确捕获击键。 我注意到，如果单击iframe以外的任何位置，则可以正确使用箭头键。

这是我的jquery代码，以及有关为什么尝试每种方法的注释。 不幸的是，没有任何效果（我也尝试过将带有embed标签而不是iframe标签的lytro图像包括在内，结果保持不变）。

<script>
    //make sure body maintains focus, so that swipe and arrows still work
    function focusit(){
        $('#focushere').focus(); // this is a div on the main page that I tried to set focus to
        $('body').focus(); // tried moving focus to the body
        $('embed').blur(); // tried bluring the embed
        $('iframe').blur(); // tried bluring the iframe
        $('body').click(); // tried faking a click on the body 
        $('#focushere').click(); //tried faking a click on a element 
        $(document).click(); // tried click on document
        $(document).focus(); //tried setting focus to document
    }
    setTimeout(focusit, 100);
</script>

Answer 1

您的问题似乎有两个方面。

1. 您正在使用setTimeout ，它将仅运行一次回调。 我认为您的意思是使用setInterval ，它将重复运行回调。

2. 您不能在本地或jQuery中使用focus方法将focus设置为document 。 为了将焦点恢复到body ，应使用document.activeElement在当前活动元素上调用blur方法。

例：

function focusit(){
    if(document.activeElement)
    {
        document.activeElement.blur();
    }
}
setInterval(focusit, 100);

CodePen演示