javascript - 如何显示多个对话框polyfill？

Question

我有打开对话框polyfill的脚本:

window.modalDialog = function (url, arg, opt) {
        url = url || ''; //URL of a dialog
        arg = arg || null; //arguments to a dialog
        opt = opt || 'dialogWidth:300px;dialogHeight:200px'; //options: dialogTop;dialogLeft;dialogWidth;dialogHeight or CSS styles

        var caller = modalDialog.caller.toString();
        var dialog = document.body.appendChild(document.createElement('dialog'));
        var splitter = opt.split(",");
        dialog.setAttribute('style', splitter[0].replace(/dialog/gi, ''));
        dialog.innerHTML = '<a href="#" id="dialog-close">&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();
        });
        dialog = document.querySelector('dialog');
        dialogPolyfill.registerDialog(dialog);

        function addListeners() {
            document.querySelector('dialog').addEventListener('mousedown', mouseDown, false);
            window.addEventListener('mouseup', mouseUp, false);
        }

        function mouseUp()
        {
            window.removeEventListener('mousemove', divMove, true);
        }

        function mouseDown(e) {
            window.addEventListener('mousemove', divMove, true);
        }

        function divMove(e) {
            var div = document.querySelector('dialog');
            div.style.position = 'absolute';
            div.style.top = e.clientY + 'px';
            div.style.left = e.clientX + 'px';
        }

        addListeners();
        dialog.showModal();
        dialog.addEventListener('close', function () {
            var returnValue = document.getElementById('dialog-body').contentWindow.returnValue;
            document.body.removeChild(dialog);
            nextStmts[0] = nextStmts[0].replace(/(window\.)?modalDialog\(.*\)/g, JSON.stringify(returnValue));
            eval('{\n' + nextStmts.join('\n'));
        });
        throw 'Execution stopped until modalDialog is closed';
    };

当我调用这个脚本时，dialog-body 被替换为新的 url，而不是创建新的对话框。如何创建多个对话框？

编辑

我最大的问题是我的对话框具有相同的父级(调用者)，因此在对话框polyfill js库中，有脚本检查父文档中是否有对话框，如果有，则抛出警告Failed to在对话框上执行 showModal:该元素已打开，因此无法以模态方式打开。

编辑

我已经创建了jsfiddle，但我不知道如何从jsfiddle调用外部源网站。 https://jsfiddle.net/godofrayer/gvLpLjkq/

Answer 1

我对您的示例进行了一些修改，现在您可以打开多个对话框。问题出在 getElementById 上。 id 在文档中必须是唯一的。因此，我已将对话框组织在一个数组中，ID 元素现在在 id 末尾包含数组的索引:id="dialog-close'+dlgIndex+'"。

我的修改是here

在这里您可以看到主要变化:

var dlgs = [];
    window.showModalDialog = window.showModalDialog || function(url, arg, opt) {
        url = url || ''; //URL of a dialog
        arg = arg || null; //arguments to a dialog
        opt = opt || 'dialogWidth:300px;dialogHeight:200px'; //options: dialogTop;dialogLeft;dialogWidth;dialogHeight or CSS styles        
        var caller = showModalDialog.caller.toString();

        var dialog = document.body.appendChild(document.createElement('dialog'));
        // Adds the Dialog to an Array of Dialogs
        var dlgIndex = dlgs.length;
        dlgs[dlgIndex] = dialog;
        dialog.setAttribute('style', opt.replace(/dialog/gi, ''));
        dialog.innerHTML = '<a href="#" id="dialog-close'+dlgIndex+'" style="position: absolute; top: 0; right: 4px; font-size: 20px; color: #000; text-decoration: none; outline: none;">&times;</a><iframe id="dialog-body'+dlgIndex+'" src="' + url + '" style="border: 0; width: 100%; height: 100%;"></iframe>';
        document.getElementById('dialog-body'+dlgIndex).contentWindow.dialogArguments = arg;
        document.getElementById('dialog-close'+dlgIndex).addEventListener('click', function(e) {
            e.preventDefault();
            dialog.close();
        });
        dialog.showModal();
        //if using yield
        if(caller.indexOf('yield') >= 0) {
            return new Promise(function(resolve, reject) {
                dialog.addEventListener('close', function() {
                    var returnValue = document.getElementById('dialog-body'+dlgIndex).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'+dlgIndex).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';
    };
})();

var showDialog = function() {
    window.showModalDialog("https://heise.de/");
  console.log("ShowSecond!!!")
  window.showModalDialog("https://www.heise.de/newsticker/meldung/Einstweilige-Verfuegung-Vodafone-muss-Kinox-to-sperren-3966023.html");
};

希望这有帮助。