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

背景:

背景:

由于需要迁移到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>

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值