防止 iframe 窃取焦点答案

【问题标题】：Prevent an iframe from stealing focus防止 iframe 窃取焦点
【发布时间】：2011-11-04 16:52:14
【问题描述】：

我有一个嵌入 iframe 的网站。当我测试 iframe 时，我使用了 google.com 并注意到搜索输入字段成为焦点。显然，我不会将 google.com 用于生产，但想防止 iframe 窃取焦点。

有没有办法防止 iframe 窃取焦点？

【问题讨论】：

【解决方案1】：

不是真的。如果焦点移开，您可以将焦点放回窗口（警告：我不建议使用该代码）：

<body onblur="window.focus();">

这有一些不太好的副作用，例如无法在 Firefox 中聚焦位置栏，或者如果框架也试图争取焦点，则进入无限循环。因此，如果您想这样做（这是一个很大的“如果”，我不推荐这样做），您至少应该将其限制在页面加载阶段并允许在此之后更改焦点。

【讨论】：

【解决方案2】：

如果您有权访问服务器端脚本，则可以使用它下载您想要嵌入的页面的实时副本、搜索它并删除任何窃取焦点的代码，然后在您的 iframe 中显示修改后的页面。或者，如果您发现没有窃取焦点的代码，您可以像往常一样将您的 iframe 链接到远程页面。

另一种选择可能是最初使用 CSS style="display:none" 隐藏 iframe，并允许用户使用 javascript Object.style.display="inline" 取消隐藏它

【讨论】：

【解决方案3】：

使用setTimeout 函数重新关注您选择的元素，例如 window.onload = function(){ setTimeout( function() { element.focus() }, 500 ) };

【讨论】：

【解决方案4】：

我在这里找到了解决方案：

Disable Body/Content Scrolling With jQuery - disableScroll

禁用滚动会阻止 iframe 窃取焦点。

我在我的 jquery 脚本中使用了这个：

if( $('iframe').length != 0 ) $(window).disablescroll();

window.addEventListener('touchstart', function onFirstTouch() 
{
window.removeEventListener('touchstart', onFirstTouch, false);
AllowScrolling()
}, false);

$(window).on("scroll",function(){ $(window).off("scroll"); AllowScrolling() });

setTimeout(AllowScrolling,5000); //Fallback
function AllowScrolling(){$(window).disablescroll('undo')}

因此，如果用户触摸屏幕或单击滚动条，则允许滚动。对我来说似乎工作正常。

【讨论】：

不要鼓励人们通过传递字符串来使用已弃用的eval 版本的setTimeout。您可以通过简单地传递函数引用而不是 eval 字符串来更好地做到这一点。 setTimeout(AllowScrolling, 5000).

【解决方案5】：

您可以等待iframe 上的onload 事件将focus() 设置回body，但如果您来自到达页面特定锚点/ID 的链接，这可能不是一个好主意.

一个更像 CSS 技巧的可能性是设置 iframe 到 fixed position 直到它被加载，然后回到 static（或原始位置或您的样式表）。

如果适合您的需要，执行简单的测试：

iframe {position:fixed}

随着

  window.onload = function() {
  for (let iframe of document.querySelectorAll("iframe")) {
    iframe.style.position = "static";
  }
};

这是一个用于测试的代码笔：https://codepen.io/gc-nomade/pen/gOpXwzY （如果链接或 iframe 损坏，请在下面评论）

【讨论】：

【解决方案6】：

您可以轮询文档的活动元素。如果恰好是<iframe>，可以调用blur()函数恢复之前聚焦的元素：

setInterval(_ => {
    if (document.activeElement.tagName == "IFRAME") {
        document.activeElement.blur();
    }
}, 500);

【讨论】：