在Chrome中设置焦点在iframe上

Question

我有一个iframe (id: 'chat')与designMode='on'在Chrome.

在Enter键事件中，我调用函数send()，它接受iframe内容并将其写入套接字。我的问题是，当清除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);
}

我对其他问题尝试了许多解决方案，但似乎没有一个奏效。

Answer 1

技巧是首先将焦点设置在主体上，然后创建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);

Answer 2

这个问题在这里已经有了答案

基本上，如果你不刷新iframe，你可以使用:

$iframe[0].contentWindow.focus();

注意，我正在抓取底层iframe DOM对象

Answer 3

我已经尝试了下面的解决方案，它适用于所有浏览器(IE/Chrome/Firefox)

Context:我想一直聚焦iframe。

    function IFocus() {
        var iframe = $("#iframeId")[0];
        iframe.contentWindow.focus();
    };
    window.setInterval(IFocus, 300);

Answer 4

我用Chrome测试了这个解决方案。我最初把它贴在设置焦点到iframe内容。

下面是使用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);

检测iframe加载时的代码改编自Biranchi的回答如何检查iframe是否加载或它有内容?