Question

随着即将从各种浏览器中删除showModalDialog API，我们公司与许多提供大型企业Web应用程序的公司一样，现在面临着一个重大的困境。

虽然我们已将showModalDialog的调用集中到3行代码，但我们广泛依赖此代码来提供模态用户提示的反馈（快速搜索解决方案显示大约2400个实例）。

我们可以相当轻松地删除showModalDialog并将其替换为基于Javascript / css的替代方案，这不是问题。我们面临的问题是所有的调用代码都不会再被阻塞，例如。

if(doConfirm(...)) {
   ...
} else {
   ...
}

由于引入了非阻塞替代方案，上述情况将会失败。我们也不能使用内置的阻塞方法（警告，确认），因为在许多情况下对话框按钮是自定义的，并且还可以设置风格以适应我们的应用程序。

基于以上所述，是否有任何实用变通方法/解决方案可以用来避免重新考虑以前的遗留代码？

Answer 1

您won't get around使用基于事件的异步代码。

实用的解决方法，以避免必须手动重新分解代码？

您可以尝试brings the await keyword到js的javascript-to-javascript编译器。它应该自动将您的代码转换为异步版本。

_{免责声明：我没有使用过任何}

Answer 2

您可以使用我的showModalDialog polyfill来避免使用回调函数，这会暂停执行后续语句，直到模态关闭为止。它通过使用生成器，promises和yield关键字来实现。它适用于最新的Opera和谷歌浏览器。

Answer 3

在jQuery的1.11.4版本中，有一个你可以使用的内置<dialog>，它还允许在关闭时捕获回调参数。

    $("#dialog").dialog({
        autoOpen: false,
        width: 500,
        height: 500,
        modal: true
        buttons: [
            {
                text: "Ok",
                click: function () {
                    $(this).dialog("close");
                }
            },
            {
                text: "Cancel",
                click: function () {
                    $(this).dialog("close");
                }
            }
        ]
    });

您可以通过按钮点击事件在回调函数中捕获您的值。

你甚至可以添加HTML来附加你自己的＆＃39; x＆＃39;按钮到现有＆＃34;关闭＆＃34;按钮并隐藏原件，这样你就可以做任何你想做的事了：

    $(document).ready(function () {
        var closeHtml = '<a href="#" id="dialog-close" style="position: absolute; top: 0; right: 4px; font-size: 20px; color: #000; text-decoration: none; outline: none;">&times;</a>';
        $("button[title='Close']").css('display', 'none').parent().append(closeHtml);

    });

然后将click个事件附加到＆＃39; x＆＃39;的dialog-close ID中。按钮：

    var url = 'https://www.cnn.com';

    // Link to open the dialog
    $("#dialog-link").click(function (event) {
        var dialog = $("#dialog");
        dialog.dialog("open");

        dialog.html('<iframe id="dialog-body" scrolling="yes" src="' + url + '" style="border: 0; width: 100%; height: 100%;"></iframe>');

        $("#dialog-close").on('click', function (e) {
            // ...do whatever you want here, then...
            $("button[title='Close']").click();
            //e.preventDefault();
            //dialog.close();
        });

        event.preventDefault();
    });

唯一需要注意的是，由于这会使用IFrame，如果网站上的安全性阻止将外部网站引入您自己的网站（如果您以这种方式使用它），则可能无效。例如，谷歌阻止了这种用途。

这应该是一个跨平台的例子 - 我已经在IE 11中对它进行了测试。＆＃34; Polyfill＆＃34;，我已经看到别人说这是另一种方法，不是，并且不适用于IE，因为它依赖于Promise，这在IE中不受支持，如本页底部所示：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

删除showModalDialog API

3 个答案: