javascript 防止 iframe 窃取焦点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7208064/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent an iframe from stealing focus
提问by jaysonp
I have a website that embeds an iframe. When I was testing the iframe, I used google.com and noticed the search input field took focus. Clearly, I won't be using google.com for production but would like to prevent the iframe from stealing focus.
我有一个嵌入 iframe 的网站。当我测试 iframe 时，我使用了 google.com 并注意到搜索输入字段成为焦点。显然，我不会将 google.com 用于生产，但希望防止 iframe 窃取焦点。
Is there a way to prevent an iframe from stealing focus?
有没有办法防止 iframe 窃取焦点？
回答by Lobster Fighter
If you have access to server side scripting you can use it to download a live copy of the page you want to embed, search it and remove any focus stealing code, then display that modified page in your iframe. Or if you find there is no focus stealing code, you can just link your iframe to the remote page as usual.
如果您有权访问服务器端脚本，则可以使用它来下载要嵌入的页面的实时副本，搜索它并删除任何焦点窃取代码，然后在 iframe 中显示修改后的页面。或者，如果您发现没有焦点窃取代码，您可以像往常一样将 iframe 链接到远程页面。
Another option might be to initially hide the iframe with CSS style="display:none"and allow the user to unhide it with javascript Object.style.display="inline"
另一种选择可能是最初使用 CSS 隐藏 iframe，style="display:none"并允许用户使用 javascript 取消隐藏它Object.style.display="inline"
回答by Wladimir Palant
Not really. You can put the focus back on your window if the focus moves away (WARNING: I don't recommend using that code):
并不真地。如果焦点移开，您可以将焦点重新放在窗口上（警告：我不建议使用该代码）：
<body onblur="window.focus();">
This has some not so nice side-effects like not being able to focus the location bar in Firefox or getting into endless loops if the frame also tries to fight for the focus. So if you want to do this (that's a big "if", I don't recommend it) you should at least limit it to the page loading phase and allow the focus to be changed after that.
这有一些不太好的副作用，例如无法在 Firefox 中聚焦位置栏或进入无限循环，如果框架也试图争取焦点。因此，如果您想这样做（这是一个很大的“如果”，我不建议这样做），您至少应该将其限制在页面加载阶段，并允许在此之后更改焦点。
回答by Robert Simpson
Use a setTimeoutfunction to refocus on an element of your choice, e.g.
window.onload = function(){ setTimeout( function() { element.focus() }, 500 ) };
使用setTimeout函数重新关注您选择的元素，例如
window.onload = function(){ setTimeout( function() { element.focus() }, 500 ) };
回答by Cymro
I found a solution here:
我在这里找到了解决方案：
Disable Body/Content Scrolling With jQuery - disableScroll
使用 jQuery 禁用正文/内容滚动 - disableScroll
Disabling scrolling stopped the iframe from stealing the focus.
禁用滚动阻止 iframe 窃取焦点。
I used this in my jquery script:
我在我的 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')}
So if a user touches the screen or clicks the scroll bar, scrolling is permitted. Seemed to work ok for me.
因此，如果用户触摸屏幕或单击滚动条，则允许滚动。对我来说似乎工作正常。
回答by G-Cyrillus
You may wait for the onloadevent on iframeto set focus()back to body, but if you come from a link reaching a specific anchor/id of the page, it might not a good idea.
您可以等待onload事件iframe设置focus()回body，但如果您来自到达页面特定锚点/ID 的链接，这可能不是一个好主意。
A possibility more alike a CSS trick is to set iframein fixedpositionuntill it is loaded, then back to static(or the original position or your style sheet).
一种可能性越来越像一个CSS技巧是设置iframe在fixedposition，直到它被加载，然后再返回到static（或原来的位置或样式表）。
simple test to perform if that suits your needs :
如果这适合您的需要，可以执行简单的测试：
iframe {position:fixed}
along with
随着
window.onload = function() {
for (let iframe of document.querySelectorAll("iframe")) {
iframe.style.position = "static";
}
};
here is a codepen for test : https://codepen.io/gc-nomade/pen/gOpXwzY(comment below here if the link or iframe is broken)
这是一个用于测试的代码笔：https://codepen.io/gc-nomade/pen/gOpXwzY （如果链接或 iframe 损坏，请在下方评论）
