Set focus on iframe in Chrome

问题

I have an iframe (id: 'chat') with designMode='on' in Chrome.

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.

How to do I set the focus so I can continue to type text in the 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.

回答1:

The trick is to first set focus on the body and then create a 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);

回答2:

This question has been answered here

Basically, if you are not refreshing the iframe you could use:

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

Note that I'm grabbing the underlying iframe DOM object.

回答3:

I have tried below solution it works in all browser (IE/Chrome/Firefox)

Context: I want to focus the iframe all the time.

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

Hope it helps, if any one in need...

回答4:

I tested this solution with Chrome. I originally posted it in Setting focus to iframe contents.

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.

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?

来源：https://stackoverflow.com/questions/8111003/set-focus-on-iframe-in-chrome

标签

javascript

jquery

google-chrome

iframe

designmode