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