Установить фокус на iframe в Chrome - PullRequest
Новая
       59

Установить фокус на iframe в Chrome

4 голосов
/ 13 ноября 2011

У меня есть iframe (id: 'chat') с designMode='on' в Chrome.

При событии Enter keypress я вызываю функцию send(), которая берет содержимое 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);
}

Я пробовал многие решения по другим вопросам, но, похоже, ни один из них не работает.

Ответы [ 4 ]

3 голосов
/ 13 ноября 2011

Хитрость заключается в том, чтобы сначала установить фокус на теле, а затем создать 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 голосов
/ 13 ноября 2011

На этот вопрос дан ответ здесь

Как правило, если вы не обновляете iframe, вы можете использовать: 

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

Обратите внимание, что я хватаюбазовый объект DOM iframe.

1 голос
/ 22 августа 2016

Я попробовал приведенное ниже решение, оно работает во всех браузерах (IE / Chrome / Firefox)

Контекст: я хочу постоянно фокусировать iframe. 

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

Надеюсь, это поможет, если кто-то нуждается ...

0 голосов
/ 14 апреля 2015

Я тестировал это решение с Chrome. Первоначально я разместил его в Настройка фокуса на содержимое iframe .

Здесь приведен код для создания iframe с использованием jQuery, добавления его к документу, опроса до загрузки, а затем фокусировки. Это лучше, чем установка произвольного тайм-аута, который может или не может работать в зависимости от того, сколько времени занимает загрузка 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 или имеет содержимое?

...