Set focus on iframe in Chrome

Question

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.

score 3 · Accepted Answer · answered Nov 13 '11 at 11:20

3

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);

answered Nov 13 '11 at 11:20

J. K.

8,268
1
36
35

Clearly that was the trick! It works. That made my day! .. Now I only have a trailing new line from the event still lingering. But atleast I have my focus! – ANisus Nov 13 '11 at 11:33

score 2 · Answer 2 · edited May 23 '17 at 12:08

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.

edited May 23 '17 at 12:08

Community

1
1

answered Nov 13 '11 at 10:56

Arturo Sevilla

227
1
8

I just tried that code as well. Unfortunately I still won't get the focus back. (I edited the question adding your suggestion) – ANisus Nov 13 '11 at 11:02
1

What if you do that in a setTimeout to give the iframe a bit of time to start inflating? – IDisposable Feb 14 '14 at 07:37

score 1 · Answer 3 · answered Aug 22 '16 at 12:01

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...

score 0 · Answer 4 · edited May 23 '17 at 12:33

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?

Set focus on iframe in Chrome

4 Answers4

Linked