Решение проблемы с不支持анием Chrome функции showModalDialog и проблем с возвратом returnValue

Что? Модальное диалоговое окно не работает?

На прошлой неделе я修改ил и протестировал проект управления后台, и при тестировании совместимости с различными браузерами я обнаружил, что метод showModalDialog в браузере Chrome не отображает модальное диалоговое окно, как будто открывается новая страница, и родительское окно все еще может получить фокус, открыть несколько окон, и значение returnValue не может быть возвращено, всегда undefined. Все эти проблемы очень раздражают, поэтому я провел тестирование на различных основных версиях браузеров.

Браузер	Поддерживается ли	Состояние
IE9	○
Firefox13.0	○
safari5.1	○
chrome19.0	×	Это не модальное диалоговое окно, а открытие нового окна
Opera 12.0	×	Ничего не происходит, даже окна не открываются

Что именно открывает Chrome?

Поскольку открывается не модальное диалоговое окно, а как будто открывается новый окно, достаточно просто проверить, пуст ли window.opener подокна.

<script type="text/javascript">
    alert(window.opener);
</script>

В Chrome отображается объект [object window], а в IE это undefined. Теперь я знаю, что Chrome обрабатывает showModalDialog как window.open. Это означает, что мы можем использовать window.opener для управления подокнами в браузере Chrome. Здесь также была обнаружена интересная особенность: в Firefox window.opener также не пуст, поэтому я решил проверить, как window.opener и window.dialogArguments работают в подокнах с использованием showModalDialog в различных браузерах. Поскольку Opera не создает даже окна, тестирование с ней было исключено.

Объяснение метода showModalDialog родительского окна, где передаваемые аргументы являются объектом window, приведены результаты теста:

Браузер	Модальное диалоговое окно	window.opener	window.dialogArguments	returnValue
IE9	○	undefined	[object Window]	○
Firefox13.0	○	[object Window]	[object Window]	○
safari5.1	○	[object Window]	[object Window]	○
chrome19.0	×	[object Window]	undefined	×

Результаты моих тестов показывают, что степень поддержки различных браузеров различна. Также стоит отметить, что в Firefox, если подокно обновляется, window.dialogArguments также теряется и становится undefined. Из результатов можно看出, что только в Chrome возвращается undefined для значения returnValue, у других браузеров нет проблем. Как же решить эту проблему?

Решение проблемы returnValue

На основе всех проведенных тестов мы знаем, что метод showModalDialog в Chrome очень похож на метод window.open, поэтому мы можем использовать window.opener для реализации функции window.returnValue.

Внимание: параметр Math.random(), используемый в temp, является случайным параметром, предназначенным для решения проблемы кэширования. Многие пользователи обнаружили, что undefined связано с проблемами кэширования. Добавлено 17 октября 2012 года

Часть js-кода в родительском окне:

window.onload = function () {
  var returnValue = window.showModalDialog("son.html?temp=" + Math.random(), window);
  //for chrome
  if (returnValue == undefined) {
    returnValue = window.returnValue;
  }
  alert(returnValue);
}

Часть js-кода в подокне:

if (window.opener != undefined) {
    //for chrome
    window.opener.returnValue = "opener returnValue";
}
else {
    window.returnValue = "window returnValue";
}
window.close();

Таким образом, это также будет работать в браузерах IE, FireFox, Chrome, Safari и т.д.

В заключение

В заключение у кого-то может возникнуть вопрос, как реализовать модальное диалоговое окно? Я считаю, что это можно сделать с помощью некоторых техник JavaScript, но я не рекомендую это делать, я также искал много информации и не нашел хорошего решения этой проблемы.もちろん、 других идей также может быть, например, чтобы не открывать больше окон, можно сделать кнопку open неактивной при открытии окна, и активной только после закрытия дочернего окна. Все это можно попробовать самому, возможно, есть лучшие методы.

В заключение хочу отметить, что в современном веб-дизайне очень популярно использовать div для имитации формы на странице, пользовательский стиль, взаимодействие都很 хороши, не обязательно использовать модальное окно. Как это сделать, сегодня я заканчиваю, если есть ошибки, пожалуйста, много указывайте.

Объявление: содержание этой статьи взято из Интернета, авторские права принадлежат соответствующему автору, контент предоставлен пользователями Интернета в добровольном порядке, сайт не обладает правами собственности, материал не был отредактирован вручную, и сайт не несет ответственности за соответствующие юридические последствия. Если вы обнаружите подозрительное нарушение авторских прав, пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма замените # на @) для сообщения о нарушении,并提供 соответствующие доказательства. При подтверждении факта нарушения сайт незамедлительно удаляет спорный материал.