javascript - 使用 jquery 防止 iframe 保持焦点

Question

背景:

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

问题:

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

我尝试过的:

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

这是我的 jquery 代码，以及有关我尝试每种方法的原因的注释。不幸的是，没有任何效果(我也尝试过使用嵌入标签而不是 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. 您无法使用 native 或 jQuery 中的 focus 方法将焦点设置到 document。为了将焦点恢复到 body，您应该调用 blur使用document.activeElement对当前事件元素进行方法.

示例:

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

<强> CodePen Demo