Mozilla Firefox不再支持dialog.showModal [英] dialog.showModal not supported by Mozilla firefox any more

问题描述

我有一个巨大的ASP网站项目及其弹出窗口，可从 showModalDialog 中使用.几个月前，mozilla进行了更新，此功能出现了一些问题.因此，我使用了 ModalDialog polyfill 来解决.但是在最近的mozilla更新中， dialog.showModal()函数已不受支持，并且我的所有弹出窗口均未打开.尽管他们通过dom提供了这样的解决方案来启用about:config中的.dialog_element.enabled首选项，但会打扰用户.

I have a huge asp website project and for its popups, used from showModalDialog. Few months ago mozilla updated and some problem occured for this function. So I used ModalDialog polyfill to solve. But in last mozilla update, dialog.showModal() function is out of support and none of my popups open. Although they gave such solution to enabled via the dom.dialog_element.enabled preference in about:config, but it disturbs users.

我对此进行了很多搜索，但没有找到任何替代我的代码的解决方案.由于我的项目庞大，因此很难使用诸如模式引导程序之类的东西.我的弹出窗口和模态具有一些要保存的返回值以及此类交互.请为此提供替代方案.或帮助我如何为此编写新的东西.

I searched a lot about this but not find any solution to replace my codes. Because of hugeness of my project, it is so hard to use something such modal bootstrap. My popups and modals have some return values to save and such interactions. please introduce an alternative for this. Or help how can I write a new thing for this.

谢谢.

推荐答案

我通过对对话框polyfill函数进行了一些更改解决了该问题.最终代码是:

I solved the problem by some changes on dialog polyfill functions. Final code is:

(function () {
window.spawn = window.spawn || function (gen) {
    function continuer(verb, arg) {
        var result;
        try {
            result = generator[verb](arg);
        } catch (err) {
            return Promise.reject(err);
        }
        if (result.done) {
            return result.value;
        } else {
            return Promise.resolve(result.value).then(onFulfilled, onRejected);
        }
    }
    var generator = gen();
    var onFulfilled = continuer.bind(continuer, 'next');
    var onRejected = continuer.bind(continuer, 'throw');
    return onFulfilled();
};
window.showModalDialog = window.showModalDialog || function (url, arg, opt) {
    url = url || '';
    arg = arg || null;
    opt = opt || 'dialogWidth:300px;dialogHeight:200px';
    var caller = showModalDialog.caller.toString();
    var dialog = document.body.appendChild(document.createElement('dialog'));
    dialog.setAttribute('style', opt.replace(/dialog/gi, ''));
    dialog.innerHTML = '<a href="#" id="dialog-close" style="position: absolute; top: 0; right: 4px; font-size: 20px; color: #000; text-decoration: none; outline: none;">&times;</a><iframe id="dialog-body" src="' + url + '" style="border: 0; width: 100%; height: 100%;"></iframe>';
    document.getElementById('dialog-body').contentWindow.dialogArguments = arg;
    document.getElementById('dialog-close').addEventListener('click', function (e) {
        e.preventDefault();
        //dialog.close();
        var event = document.createEvent('Event');
        event.initEvent('myEvent', true, true);
        dialog.dispatchEvent(event);
    });

    try {
        //dialog.showModal()
        dialog.style.top = '50px';
        dialog.style.display = 'block';
        document.getElementsByTagName('body')[0].appendChild(dialog);
    }
    catch (err) {
        alert(err);
    }

    //if using yield
    if (caller.indexOf('yield') >= 0) {
        return new Promise(function (resolve, reject) {
            dialog.addEventListener('myEvent', function () {
                var returnValue = document.getElementById('dialog-body').contentWindow.returnValue;
                document.body.removeChild(dialog);
                resolve(returnValue);
            });
        });
    }

        //if using eval
        var isNext = false;
        var nextStmts = caller.split('\n').filter(function (stmt) {
            if (isNext || stmt.indexOf('showModalDialog(') >= 0)
                return isNext = true;
            return false;
        });
        dialog.addEventListener('close', function () {
            var returnValue = document.getElementById('dialog-body').contentWindow.returnValue;
            document.body.removeChild(dialog);
            nextStmts[0] = nextStmts[0].replace(/(window\.)?showModalDialog\(.*\)/g, JSON.stringify(returnValue));
            eval('{\n' + nextStmts.join('\n'));
        });
    throw 'Execution stopped until showModalDialog is closed';
};
})();

这篇关于Mozilla Firefox不再支持dialog.showModal的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！