Question

Chrome中有id: 'chat'的iframe（designMode='on'）。

在输入按键事件时，我调用函数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

这个问题一直是answered here

基本上，如果您没有刷新iframe，可以使用：

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

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

Answer 3

我尝试过以下解决方案，它适用于所有浏览器（IE / Chrome / Firefox）

上下文：我想一直关注iframe。

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

希望有帮助，如果有需要的话......

Answer 4

我用Chrome测试了这个解决方案。我最初是在Setting focus to iframe contents发布的。

这是使用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对How to check if iframe is loaded or it has a content?

的回答改编的

将重点放在Chrome中的iframe上

4 个答案: