javascript 在 Chrome 中将焦点设置为 iframe
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8111003/
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
Set focus on iframe in Chrome
提问by ANisus
I have an iframe (id: 'chat') with designMode='on'in Chrome.
我在 Chrome 中有一个 iframe ( id: 'chat') designMode='on'。
On Enter keypress event I call the function send(), which takes the iframe contents and writes it to a socket. My problem is that when clearing the iframe, I lose focus.
在 Enter keypress 事件中，我调用函数send()，该函数获取 iframe 内容并将其写入套接字。我的问题是在清除 iframe 时，我失去了焦点。
How to do I set the focus so I can continue to type text in the iframe?
如何设置焦点以便我可以继续在 iframe 中输入文本？
function send(){
var $iframe = $('#chat');
var text = $iframe.contents().text() + "\n";
socket.send(text);
// When this is done, the focus is lost
// If commented, the focus will not be lost
$iframe.contents().find('body').empty();
// My different failed attempts to regain the focus
//$iframe.focus();
//$iframe.contents().focus();
//$iframe.contents().find('body').focus();
//$iframe.contents().find('body').parent().focus();
//$iframe[0].contentWindow.focus();
// I've also tried all the above with timers
//setTimeout( function(){ $('#chat').contents().focus(); }, 100);
}
I've tried many of the solutions on other questions, but none seems to work.
我已经尝试了许多其他问题的解决方案，但似乎都没有奏效。
采纳答案by J. K.
The trick is to first set focus on the body and then create a Range.
诀窍是首先将焦点放在身体上，然后创建一个Range.
var win = iframe.contentWindow;
var range = win.document.createRange();
range.setStart(win.document.body, 0);
range.setEnd(win.document.body, 0);
win.document.body.focus();
win.getSelection().addRange(range);
回答by Arturo Sevilla
This question has been answered here
这个问题已经在这里回答
Basically, if you are not refreshing the iframe you could use:
基本上，如果您不刷新 iframe，您可以使用：
$iframe[0].contentWindow.focus();
Note that I'm grabbing the underlying iframe DOM object.
请注意，我正在抓取底层的 iframe DOM 对象。
回答by Champ
I have tried below solution it works in all browser (IE/Chrome/Firefox)
我尝试了以下解决方案，它适用于所有浏览器（IE/Chrome/Firefox）
Context: I want to focus the iframe all the time.
上下文：我想一直关注 iframe。
function IFocus() {
var iframe = $("#iframeId")[0];
iframe.contentWindow.focus();
};
window.setInterval(IFocus, 300);
Hope it helps, if any one in need...
希望有帮助，有需要的朋友...
回答by Stephen Ostermiller
I tested this solution with Chrome. I originally posted it in Setting focus to iframe contents.
我用 Chrome 测试了这个解决方案。我最初将其发布在将焦点设置为 iframe 内容中。
Here is code to create an iframe using jQuery, append it to the document, poll it until it is loaded, then focus it. This is better than setting an arbitrary timeout which may or may not work depending on how long the iframe takes to load.
这是使用 jQuery 创建 iframe 的代码，将其附加到文档中，轮询它直到它被加载，然后聚焦它。这比设置任意超时更好，这取决于 iframe 加载所需的时间。
var jqueryIframe = $('<iframe>', {
src: "http://example.com"
}),
focusWhenReady = function(){
var iframe = jqueryIframe[0],
doc = iframe.contentDocument || iframe.contentWindow.document;
if (doc.readyState == "complete") {
iframe.contentWindow.focus();
} else {
setTimeout(focusWhenReady, 100)
}
}
$(document).append(jqueryIframe);
setTimeout(focusWhenReady, 10);
The code for detecting when the iframe is loaded was adapted from Biranchi's answer to How to check if iframe is loaded or it has a content?
用于检测 iframe 何时加载的代码改编自Biranchi对How to check if iframe is loaded or it has a content?的回答。
