Question

我有一个庞大的asp网站项目及其弹出窗口，用于showModalDialog。几个月前，mozilla已更新，并且此功能出现了一些问题。所以我使用ModalDialog polyfill来解决。但是在上一次mozilla更新中，dialog.shoModal()函数不受支持，我的弹出窗口都没有打开。虽然他们通过about：config中的dom.dialog_element.enabled首选项启用了这样的solution，但它会扰乱用户。

我搜索了很多关于此但没有找到任何解决方案来替换我的代码。由于我的项目庞大，使用这样的模态引导程序是如此困难。我的弹出窗口和模态有一些返回值可以保存和进行此类交互。请介绍一个替代方案。或者帮助我如何为此写一个新的东西。

感谢。

Answer 1

我通过对话框polyfill函数的一些更改解决了这个问题。最终代码是：

(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';
};
})();

Answer 2

或者仅使用旧的polyfill（这是所有浏览器的正确解决方案）并转到firefox config（URL中的about：config）并按照https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal

中的说明将dom.dialog_element.enabled设置为true。

mozilla firefox不再支持dialog.showModal

2 个答案: