Настройка фокуса на содержимое iframe

У меня есть страница с обработчиком событий document.onkeydown, и я загружаю ее внутри iframe на другой странице. Мне нужно щелкнуть внутри iframe, чтобы страница контента начала "слушать".

Есть ли способ использовать JavaScript на внешней странице для установки фокуса на внутреннюю страницу, поэтому мне не нужно щелкнуть внутри iframe?

EDIT: ответ на комментарий:

Контекст - основное окно - это система с подсветкой, за исключением вместо изображений, она показывает iframe, а каждый iframe - это интерактивная страница с обработчиками keydown/mousemove. эти обработчики не срабатывают, пока я не щелкнув в iframe после показа световой шкатулки.

Я на самом деле не смотрю на "setFocus" в традиционном смысле так же, как "включить обработчики событий в iframe contentDocument"

Ответ 1

У меня была аналогичная проблема с jQuery Thickbox (виджет диалогового окна в стиле лайтбокса). Я исправил свою проблему следующим образом:

function setFocusThickboxIframe() {
    var iframe = $("#TB_iframeContent")[0];
    iframe.contentWindow.focus();
}

$(document).ready(function(){
   $("#id_cmd_open").click(function(){
      /*
         run thickbox code here to open lightbox,
         like tb_show("google this!", "http://www.google.com");
       */
      setTimeout(setFocusThickboxIframe, 100);
      return false;
   });
});

Код не работает без setTimeout(). Основываясь на моем тестировании, он работает в Firefox3.5, Safari4, Chrome4, IE7 и IE6.

Ответ 2

Используя метод contentWindow.focus(), таймаут, вероятно, необходимо дождаться полной загрузки iframe.

Для меня также использование атрибута onload="this.contentWindow.focus()" работает с firefox в теге iframe

Ответ 3

document.getElementsByName("iframe_name")[0].contentWindow.document.body.focus();

Ответ 4

Попробуйте прослушивать события в родительском документе и передать событие обработчику в документе iframe.

Ответ 5

У меня была аналогичная проблема, когда я пытался сосредоточиться на области txt в iframe, загруженном с другой страницы. в большинстве случаев это работает. Возникла проблема, когда он загорелся в FF, когда iFrame был загружен, но до того, как он был виден. поэтому фокус никогда не казался правильным.

Я работал над этим с помощью симулятивного решения, чтобы отбросить ответ выше

    var iframeID = document.getElementById("modalIFrame"); 
//focus the IFRAME element 
$(iframeID).focus(); 
//use JQuery to find the control in the IFRAME and set focus 
$(iframeID).contents().find("#emailTxt").focus();

Ответ 6

Я обнаружил, что FF запускает событие focus для iframe.contentWindow, но не для iframe.contentWindow.document. Например, Chrome может обрабатывать оба случая. поэтому мне просто нужно было привязать обработчики событий к iframe.contentWindow, чтобы заставить все работать. Может быть, это помогает кому-то...

Ответ 7

Вот код для создания 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 для ответа на Как проверить if iframe is загружен или у него есть контент?

Ответ 8

Это то, что сработало для меня, хотя оно немного пахнет:

var iframe = ...
var doc = iframe.contentDocument;

var i = doc.createElement('input');
i.style.display = 'none'; 
doc.body.appendChild(i);
i.focus();
doc.body.removeChild(i);

Ммм. он также прокручивается до нижней части содержимого. Думаю, я должен вставлять фиктивный текстовый ящик вверху.