最近在公司做一个内部项目，其中一个功能是数据批量导入。系统在调用这个功能后，会弹出一个窗口，然后选择要导入的文件，将文件中的数据展示在下一页面，最后是执行导入。如此，这个导入功能就会先后跳转三个页面，没法使用window.showModalDialog，因为使用window.showModalDialog在跳转到第二个页面后，浏览器会弹出另一个窗口，这样的话就只能使用window.open了。可是使用window.open还有一个问题，就是不会阻塞，原窗口与弹出窗口之间均可操作，这样的话数据导入后就不好刷新原窗口了。
后来查了下《DHTML手册》，看到opener对象，它是原窗口在被调用窗口中的对象，即我在被调用窗口中执行window.opener，会取得原窗口。虽然这个对象我早就知道，但在我印象里似乎用window.open调用的窗口是无法取得opener的。不过想了想，似乎也就这么一道办法了，所以还是试验了下，并在IE6、IE7和Chrome中测试通过。这里需要注意的是，opener完全就是原窗口的对象，它的所有成员跟原窗口一致。
虽然我不能把公司的程序拷在这里，但可以将自己写的测试例子留在这儿：
a.html的代码：
<html>
<head>
<title>调用者</title>
<script language="javascript">
function openPage() {
window.open("b.html");
}
function ref() {
document.getElementById("divshow").innerText = "test";
}
</script>
</head>
<body>
<div id="divshow"></div>
<button id="openButton" onclick="openPage()">打开</button>
<button id="refButton" onclick="ref()" style="display:none;">执行</button>
</body>
</html>
该页面负责调用弹出窗口，其中的refButton按钮就是我要用来执行操作的对象。
b.html的代码：
<html>
<head>
<title>被调者</title>
<script language="javascript">
function goPage() {
location.href = "c.html";
}
</script>
</head>
<body>
<button id="goButton" onclick="goPage()">跳转</button>
</body>
</html>
该页面为弹出页面，不过这里为了试验，并没有让b.html调用原窗口的refButton按钮，而是跳转到下一页面。
c.html的代码
<html>
<head>
<title>跳入者</title>
<script language="javascript">
function closePage() {
var o = window.opener.document.getElementById("refButton");
o.click();
}
</script>
</head>
<body onunload="closePage()">
<button id="closeButton" onclick="window.close()">关闭</button>
</body>
</html>
这个页面会在关闭的时候调用原窗口的refButton按钮的click事件。这里需要注意的是，若是在实际开发中，为了预防各种情况，建议为closePage中的o对象增加一个判断，即判断该对象是否为空。
发表于 @ 2008年10月19日 08:37:00|评论(loading...)|编辑|收藏