Установка фокуса на iFrame в IE

Question

В моем приложении есть древовидное меню, и по щелчку пунктов меню он загружает URL в iFrame. Мне нравится устанавливать фокус в элементе страницы, загруженной в iFrame.

Я использую этот код, и он отлично работает во всех браузерах, кроме IE :

var myIFrame = $("#iframeName");
myIFrame.focus();
myIFrame.contents().find('#inputName').focus();

Я перепробовал все разные варианты, такие как использование setTimeout, но без шансов.

После загрузки страницы, когда я нажимаю клавишу табуляции, она переходит ко второму вводу, что означает, что она была на первом вводе, но не показывает курсор!

Я использую ExtJS и плагин ManagedIFrame.

Любая помощь приветствуется.

Answer 1

Вам необходимо вызвать метод focus() объекта iframe window, а не элемента iframe. Я не являюсь экспертом ни в jQuery, ни в ExtJS, поэтому в моем примере ниже не используется ни один.

function focusIframe(iframeEl) {
    if (iframeEl.contentWindow) {
        iframeEl.contentWindow.focus();
    } else if (iframeEl.contentDocument && iframeEl.contentDocument.documentElement) {
        // For old versions of Safari
        iframeEl.contentDocument.documentElement.focus();
    }
}

Answer 2

iFrame виден при загрузке или показывается позже? Элементы создаются в другом порядке, что является основой подхода setTimeout. Вы пробовали время ожидания высокого значения в течение установленного времени ожидания?

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

$(function(){
  setTimeout(function() {
    var myIFrame = $("#iframeName");
    myIFrame.focus();
    myIFrame.contents().find('#inputName').focus();
    }, 500);
});

Answer 3

Трудно устранить неполадки без рабочего примера, но вы также можете попробовать скрыть и показать ввод, чтобы заставить IE перерисовать элемент.

Что-то вроде:

var myIFrame = $("#iframeName");
myIFrame.focus();
myIFrame.contents().find('#inputName').hide();
var x = 1;
myIFrame.contents().find('#inputName').show().focus();

Это может подтолкнуть IE к отображению курсора.

Answer 4

Я могу заставить IE сфокусировать поле ввода в iframe с помощью:

iframe.focus();
var input = iframe...
input.focus();
iframe.contentWindow.document.body.focus();
input.focus();