防止 iframe 使用 jquery 保持焦点

Question

背景：

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

问题：

我遇到的问题是，当您与 iframe 交互时，它会窃取桌面上的键盘焦点，并阻止箭头键允许您更改幻灯片。

我的尝试：

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

这是我的 jquery 代码，以及关于我为什么尝试每种方法的 cmets。不幸的是，没有任何效果（我也尝试使用 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 方法将焦点设置为 document。为了将焦点恢复到body，您应该使用document.activeElement 在当前活动元素上调用blur 方法。

示例：

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

CodePen Demo