Кажется, что мир Javascript развивается все быстрее и быстрее. Есть новые функции, которые улучшают язык, новые стандарты, такие как ES6 ... но также есть некоторые функции, которых больше не существует. Это случай функции window.showModalDialog.

Я работаю в старом проекте, где основным веб-браузером является Internet Explorer 8 (я знаю, я работаю в предыстории !!!). Теперь заказчик хочет перенести весь проект на новые версии браузеров (в основном, Mozilla и Chrome).

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

Согласно MDN, window.showModalDialog создает и отображает модальное диалоговое окно, содержащее указанный HTML-документ. Синтаксис действительно прост:

Как видите, функции нужен URL-адрес (очевидно !!!) НО, если вы хотите (необязательно), она также может принимать некоторые аргументы (и параметры, но в данном случае это не так. не имеет значения), которое вы можете получить в новом окне (модальное диалоговое окно)

Давайте посмотрим на пример:

Когда вы узнаете, как это работает, давайте сосредоточимся на реальной проблеме (помните, что эта функция устарела и была удалена в новых версиях браузеров, таких как Chrome или Firefox).

Если вы исследуете window.showModalDialog в Firefox или window.showModalDialog в Chrome (мой проект не поддерживает Safari. По этой причине Safari не отображается в моем исследовании), вы обнаружите, что « этот метод был удален в Chrome 43 и Firefox 56 »

Первый шаг к поиску различных альтернатив - это знать, что вам нужно. Например, если вы используете эту функцию во множестве файлов HTML или JS, вам понадобится точно такая же функция с тем же именем и теми же аргументами (вы не должны искать все вызовы и изменять их. Вы можете сошли с ума !!!)

В этом случае вам понадобится полифилл. « polyfill - это код, который реализует функцию в веб-браузерах, которые не поддерживают эту функцию ». Звучит идеально, не правда ли? но… как мы можем это сделать? Ответ прост ... однако реализация немного сложна.

Лучше всего это сделать с помощью элемента ‹Dialog› HTML5. Основная проблема с этим элементом, как всегда, заключается в совместимости с веб-браузерами. В настоящее время Chrome - единственный браузер, который его поддерживает. Microsoft Edge имеет рассматриваемый элемент, в то время как Firefox выпустил элемент в новых версиях (начиная с версии 57), но для использования элемента вы должны включить dom.dialog_element.enabled в about: config.

Чтобы решить эту проблему, вы можете переписать функцию:

Таким образом, если вы используете Internet Explorer 8, Firefox или Chrome, вы будете выполнять настоящую функцию или новую реализацию (реальная проблема с этой альтернативой - Microsoft Edge. В моем случае заказчик считает, что это не имеет большого значения) E

Если вам показалось, что эта альтернатива интересна, вам стоит проверить реализацию НИУТЕХ.

Вы можете найти больше альтернатив, если вас не волнуют имя и параметры вашей функции. Настоятельно рекомендуется изучить Javascript в 2021 году.

Если вы поищете «Window Modal», вы обнаружите, что Bootstrap - самый известный фреймворк для отображения модального диалогового окна. Основная проблема - совместимость со старыми браузерами (например, Internet Explorer 8), но она работает, если вы используете JQuery версии 1.9.1.

Вместо Bootstrap вы также можете поискать другие библиотеки или другие реализации. Я не нашел ничего достаточно хорошего. Есть хорошая реализация, такая как JQueryUI Dialog, но она не обеспечивает такой же функциональности, как showModalDialog (вы должны принять во внимание, что вы можете использовать iframe для перехода по URL-адресу и отображения модального окна с Boostrap)

Как видите, хорошей альтернативы window.showModalDialog нет. Это связано с тем, что в window.showModalDialog есть одна вещь, которую мы никогда не сможем воспроизвести. он останавливает выполнение кода до тех пор, пока диалог не будет закрыт и результат диалога не будет возвращен вызывающей стороне. По этой причине нам придется реорганизовать наш код, чтобы вместо этого использовать функции обратного вызова (или, возможно, обещания).