Установка фокуса на содержимое iframe

Question

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

Есть ли какой-нибудь способ, которым я могу использовать JavaScript на внешней странице, чтобы установить фокус на внутренней странице, чтобы мне не приходилось нажимать внутри iframe?

РЕДАКТИРОВАТЬ: ответ на комментарий:

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

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

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

Answer 2

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

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

Answer 3

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

Answer 4

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

Answer 5

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

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

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

Answer 6

Здесь приведен код для создания 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 или имеет контент?

Answer 7

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

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

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