弹出页面回调调用者页面小技巧

    最近在公司做一个内部项目,其中一个功能是数据批量导入。系统在调用这个功能后,会弹出一个窗口,然后选择要导入的文件,将文件中的数据展示在下一页面,最后是执行导入。如此,这个导入功能就会先后跳转三个页面,没法使用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" οnclick="openPage()">打开</button>
  <button id="refButton" οnclick="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" οnclick="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 οnunlοad="closePage()">
  <button id="closeButton" οnclick="window.close()">关闭</button>
 </body>
</html>
这个页面会在关闭的时候调用原窗口的refButton按钮的click事件。这里需要注意的是,若是在实际开发中,为了预防各种情况,建议为closePage中的o对象增加一个判断,即判断该对象是否为空。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值