Edge的IE兼容性模式下，解决模态对话框上调用window.open弹出IE浏览器的问题

本文链接：https://blog.csdn.net/fx_yzjy101/article/details/118309385

背景：

由于需要迁移到Edge浏览器，采用Edge的IE模式。程序都是模态对话框的方式打开新窗口。

问题现象：

在Edge的IE模式下，在模态对话框上调用window.open()方法出现了一个问题，调用window.open()方法后没有打开新Edge的页签，而是弹出了一个新的IE浏览器。这个现象导致在Edge的IE模式的单点认证都没有办法带到新弹出的IE浏览器上，需要用户重新登录。这样的话用户体验太差了，完全不能忍。

解决办法：

方法一：带参数，在新弹出的IE浏览器上再进行单点认证一下。技术上是可行的，但是，需要单点认证系统、业务系统双方都改代码来实现，相对比较麻烦。而且弹出IE浏览器，会给用户造成困扰。

方法二：把模态对话框需要打开的Url参数传到父窗口，由父窗口触发window.open()。这样不会弹出IE浏览器，用户体验较好。这个是业务系统就能解决的。

代码部分：

废话不多说了，上代码（PS：这个解决办法适用于将所有打开的模态对话框都关闭，然后在首页触发window.open()）：

首页

<body>
    <input type="button" value="打开第一层模态" onclick="fnOpenFirstPage();" />
    <script>
        function fnOpenFirstPage() {
            window.showModalDialog("firstpage.html", self);
        }

        function openurl(strUrl) {
            if (parent.window.dialogArguments == undefined) {
                window.open(strUrl);
            } else {
                parent.window.dialogArguments.openurl(strUrl);
                window.close();
            }
        }
    </script>
</body>

firstpage.html

<body>
    <input type="button" value="打开第二层模态" onclick="fnOpenSecondPage();" />
    <script>
        function fnOpenSecondPage() {
            window.showModalDialog("secondpage.html", self);
        }

        function openurl(strUrl) {
            if (parent.window.dialogArguments == undefined) {
                window.open(strUrl);
            } else {
                parent.window.dialogArguments.openurl(strUrl);
                window.close();
            }
        }
    </script>
</body>

secondpage.html

<body>
    <input type="button" value="关闭模态打开新窗口" onclick="openurl();" />
    <script>
        var strUrl = "target.html";

        function openurl(strUrl) {
            if (parent.window.dialogArguments == undefined) {
                window.open(strUrl);
            } else {
                parent.window.dialogArguments.openurl(strUrl);
                window.close();
            }
        }
    </script>
</body>

target.html

<body>
    <h1>I am target page</h1>
</body>