Установка фокуса на содержимое iframe
У меня есть страница с обработчиком событий document.onkeydown, и я загружаю ее в iframe на другой странице. Мне нужно щелкнуть внутри iframe, чтобы страница с контентом начала «слушать».
Есть ли способ использовать JavaScript на внешней странице, чтобы установить фокус на внутреннюю страницу, чтобы мне не приходилось щелкать внутри iframe?
Обновлено: ответ на комментарий:
Контекст - это главное окно, представляющее собой систему, подобную световому окну, за исключением того, что вместо изображений оно показывает фреймы, а каждый фрейм представляет собой интерактивную страницу с обработчиками keydown / mousemove. эти обработчики не срабатывают, пока я не щелкну по iframe после того, как покажу световой короб.
На самом деле я не ищу "setFocus" в традиционном смысле, а скорее "включить обработчики событий в iframe contentDocument"
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 8
document.getElementsByName("iframe_name")[0].contentWindow.document.body.focus();
Небольшая вариация этого решения работала в моем проекте. Моя версия была: this.iframe[0].contentWindow.document.body.focus(); Но мне пришлось изменить ее таким образом, чтобы она работала в плагине, который я использую.
Попробуйте прослушать события в родительском документе и передать событие обработчику в документе iframe.
Это то, что у меня сработало, хотя пахнет немного не так:
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);
Хм. он также прокручивается до конца содержимого. Думаю, мне нужно вставить фиктивное текстовое поле вверху.
У меня была аналогичная проблема с 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.
Я предполагаю, что это потому, что A: iframe должен завершить загрузку, а B: safari имеет (имел?) Ошибку в отношении этого и требует setTimeout не менее 1
Спасибо, что поделился. Работает отлично.
Хороший звонок в установленный тайм-аут. Я считаю, что settimeout сглаживает множество проблем с кодом события ... Я предполагаю, что это потому, что код запускается в середине обработки событий браузера, а settimeout вытаскивает его и запускает после того, как все событие завершено.
почему здесь iframe [0] взят как индекс массива?
При использовании метода contentWindow.focus () время ожидания, вероятно, необходимо для того, чтобы дождаться полной загрузки iframe.
Для меня также использование атрибута onload = "this.contentWindow.focus()" работает с firefox в теге iframe
Использование этого решения в сочетании с предложением Хайме ниже решило мою проблему, по крайней мере, в браузерах Mozilla и webkit. Все еще проверяю IE ...
Я обнаружил, что FF запускает событие фокуса для iframe.contentWindow, но не для iframe.contentWindow.document. Например, Chrome может обрабатывать оба случая. Итак, мне просто нужно было привязать обработчики событий к iframe.contentWindow, чтобы все заработало. Может, это кому-нибудь поможет ...
У меня была аналогичная проблема, когда я пытался сосредоточиться на области 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();
Вот код для создания 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, был адаптирован из ответа Биранчи на Как проверить, загружен ли iframe или есть контент?
Можете ли вы предоставить больше контекста? Вы печатаете в главном окне и ожидаете, что этот текст появится (в той или иной форме) в вашем iframe? Это актуально, потому что установка фокуса внутри вашего iframe будет мешать пользователям вводить текст в главном окне.