javascript - Mozilla firefox 不再支持 dialog.showModal

Question

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

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

谢谢。

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