IE 9 и IE 10 не могут время от времени вводить текст в поля ввода

Есть веб-страница с iframe внутри. Иногда элементы управления текстовым полем ввода внутри iframe блокируются / блокируются. Пользователи не могут вводить текст в них. Но текстовое поле может быть сфокусированным, а не блеклым. Нет кода для отключения элементов управления вводом, и это не всегда происходит. До сих пор это происходило только в IE 9 и IE 10. Firefox и Chrome в порядке.

Краткое описание того, как работает страница:

  • На родительской странице есть кнопка. При щелчке он создаст iframe с нуля и покажет его. Это сделано Javascript.

  • Опять же, на фрейме есть кнопка, чтобы закрыть его. Нажав на нее
    удалит iframe из DOM родительской страницы.

Пожалуйста, дайте мне знать, если вам нужна дополнительная информация по мере необходимости. Заранее спасибо.

11 ответов

Решение

Эта ошибка очень раздражает, еще хуже, было очень мало информации, которую мы могли найти в Google.

Есть только одна ссылка от Microsoft, которая касается IE9, но проблема все еще существует в IE10 / IE11 и намного проще воспроизвести.

Я только что создал скрипку, чтобы описать эту проблему

http://jsfiddle.net/WilliamLeung/T3JP9/1/

Почему M$ так трудно решить эту проблему годами?

должно быть три обходных пути

  1. Сбрасывайте фокус каждый раз, когда мы модифицируем DOM с помощью iframe
  2. или наметить трудоемкую задачу "ничего не делать", которая может волшебным образом реагировать IE на событие мыши, я не могу сказать вам, почему, может быть, M$ мог

    Примеры кодов, которые устанавливают трудоемкую задачу

    setInterval(function () {
        var loopCount = 10000;
        var x = 0;
        for (var i = 0; i < loopCount; i++) {
            x = (x + Math.random() * 1000) >>> 0;
        }
        return x;
    }, 1000);
    
  3. или сбросьте содержимое DOM, прежде чем удалить его из документа

    someDivWithIframe.innerHTML = "";
    $(someDivWithIframe).remove();
    

    Я не уверен, если это поможет во всех случаях, вы должны попробовать

Решение с jQuery работало на IE11 для меня, а не на других решениях.

$(theIframeElement).empty().remove();

Другое решение, работающее над IE9/10, состояло в том, чтобы установить iframe src пустым перед его удалением.

iframe.src=""

Но это вызывает исключение "Доступ запрещен" в IE11, если вы используете более старую версию jQuery <1.11.1

Некоторые ссылки: Для информации jQuery также исправил эту проблему для своего плагина Dialog.js, который отображал контент в iframe: http://bugs.jqueryui.com/ticket/9122

Исправление ошибки jQuery в IE11: "доступ запрещен": http://bugs.jquery.com/ticket/14535

Мне удалось исправить эту ошибку, вернув фокус на главную страницу. Пока что я сделал: поместил текстовое поле ввода HTML, которое установлено невидимым, на главной странице. Когда iframe закрывается, я возвращаю фокус к этому текстовому полю.

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

link1

link2

Ни одно из решений не работало для меня в IE 11.

Решил это, добавив этот код в iframe:

$("input").first().focus().blur();

Очевидно, это не сработает, если вы не контролируете свой iframe.

Это работало для меня на IE11,

  • Причина проблемы (кроме глупости IE):
    • Сфокусированный элемент ввода удаляется с дисплея внутри iframe (свойство css display)
  • Выпуск:
    • Элемент ввода текста нельзя щелкнуть, однако вы все равно можете перейти к нему
  • Временное решение:
    • Нам нужно сфокусировать () известный видимый элемент перед тем, как убрать поле ввода с экрана, поэтому на линии, прежде чем мы уберем отображение с поля ввода, у нас есть строка: document.body.focus();

Просто добавьте к тому, что сказали другие, на самом деле это проблема, когда некоторые входные данные в iframe имеют фокус, который затем закрывается, что приводит к тому, что все остальные входные данные теряют фокусировку. И действительно, наличие скрипта для установки фокуса на элемент решает проблему. Но для меня это не сработало, потому что некоторые из моих входов были отключены. Таким образом, решение, которое работает для меня ниже

$("input[type=text]:not([disabled])").first().focus();

Полный фрагмент, так как я использовал начальный модал, и у модала был iframe. Я установил фокус на редактируемое поле перед открытием модели и после закрытия:

var modalInstance = $uibModal.open({
    // modal properties
  });
modalInstance.closed.then(function () {
  $("input[type=text]:not([disabled])").first().focus();
});
modalInstance.opened.then(function () {
  $("input[type=text]:not([disabled])").first().focus();

});

Простое решение с Javascript, которое работает для меня, и я не видел побочных эффектов в других браузерах:

<script>
  var pswElement = document.getElementById("password");
  pswElement.addEventListener("focus", myFocusFunction, true);

  function myFocusFunction() {    
    document.getElementById("password").select();
  }
</script>

Во всяком случае, довольно печально, что MS не может решить эту проблему и в старшей версии.

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

https://github.com/steelheaddigital/jquery.purgeFrame

У меня была такая же проблема с IE11, angularjs и использованием IFrame. Мой шаблон использует ng-switch изменить режимы просмотра. Один из режимов просмотра содержит IFrame. В тот момент, когда я переключаюсь из режима просмотра, содержащего IFrame:

var iFrame = <HTMLIFrameElement>document.getElementById("myIFrame");
iFrame.focus();
this.mode = ViewModes.ModeWithoutIFrame;

Решил проблему для меня.

Вот решение, которое сработало для меня, попробовав все остальные на этой странице! Требуется jQuery, но я уверен, что он может быть переписан на родном JavaScript, если это необходимо.

Как и во многих других решениях, это следует добавить к источнику iframe, предполагая, что у вас есть доступ для его изменения:

$("body").focusout( function () { window.focus(); });

Я тоже страдал от этой проблемы. Как указал Уильям Люнг, в IE есть ошибка удаления Iframe Объект из DOM.

Попробуйте следующее:

$(someDivWithIframe).empty().remove();
Другие вопросы по тегам