Question

我有一个嵌入iframe的网站。当我测试iframe时，我使用google.com并注意到搜索输入字段成为焦点。显然，我不会使用google.com进行制作，但希望阻止iframe窃取焦点。

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

Answer 1

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

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

Answer 2

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

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

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

Answer 3

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

Answer 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')}

因此，如果用户触摸屏幕或单击滚动条，则允许滚动。似乎对我来说还可以。

Answer 5

您可以等待onload上的iframe事件将focus()设置回body，但是如果您来自某个链接，且该链接到达页，这可能不是一个好主意。

更像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损坏，请在下面评论）

防止iframe窃取焦点

5 个答案: