有道JavaScript监听浏览器的问题(附一解决方案)


相信大家在web项目中,经常会用到javascript的事件监听、事件冒泡这些东西。当然也包括window.opener,window.showModalDialog这些父子窗口的互操作。 

但不知道大家有没遇到这样一种情况,新开的窗口是通过<a href="" />打开 的,而不是window.opener或showModalDialog打开的。 

尤其是需要注意的是:这个href指向的地址(页面)不是我们开发的,譬如,我们将href指向www.cnblogs.com。

OK,问题来了:假如我们在a 所在的页面有个按钮,可以触发点击事件并进行一些操作。 而这个点击事件需要在href打开的IE窗口关闭后触发。。。 

 这个时候,我们如何监视href打开的窗口呢?(通过javascript,不要说什么进程啥的东东).

 假设有a.html如下:

   1 

 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4  <head>
 5   <title> a.html </title>
 6   <meta name="generator" content="editplus" />
 7   <meta name="author" content="" />
 8   <meta name="keywords" content="" />
 9   <meta name="description" content="" />
10  </head>
11 
12  <body>
13    <input type="button" id="btnParent" onclick="alert('a');" value="Click !" />
14    <href="http://www.cnblogs.com" target="_blank">Link to B.HTML</a>  
15  </body>
16 </html>

 

 现在的要求就是:点击 "Link to B.HTML" 打开http://www.cnblogs.com。

                       打开的新窗口关闭后,触发a.html中的  btnParent 的点击事件~~~~

 

---

    我相信很少有人做过这样的应用,或碰到这样的问题。 而我现在刚好碰到这样一个需求。

    因此将问题发到这里来,让大家帮忙给揣摩揣摩。

    虽然文章内容很少,但我想,这样一个问题还是值得上首页的。~~~^_^  

 

-------------------------------

终于有高人提到了用window.closed这个属性来判断新开的窗口是否关闭(并用setInterval来实现监听的效果)。而且window.closed是可以跨域的。

(个人认为:打开的新窗口返回的window对象与窗口中的window对象是两个东西,读取后者会存在跨域问题,而前者是本地的东西) 

当然,要使用window.closed这个东西,我们还得先获取window对象,由于需要是新开窗口,因此我们可以用window.open。下面是具体实现代码:

( 可以移步keyapril同学的回复处查看)

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <script type="text/javascript">
 7 var $=function()
 8 {
 9     if(!arguments || arguments.length!=1)
10     {
11         throw new Error('the arguments is needed');
12     }
13     if(typeof arguments[0=== 'string' )
14     {
15       return document.getElementById(arguments[0]);
16     }
17     if(typeof arguments[0=== 'function' )
18     {        
19         if(window.addEventListener)
20         {
21             window.addEventListener('load',arguments[0],false);
22         }
23         if(window.attachEvent)
24         {
25             window.attachEvent('onload',arguments[0]);
26         }
27     }
28 }
29 $(function(){
30     $('a1').onclick=function(event)
31     {
32         var e = event || window.event;
33         var newW=window.open(this.href);
34         var inter=window.setInterval(function(){
35             if(newW.closed){
36                 window.clearInterval(inter);
37                 $('btn1').click();
38             }
39         },100);
40         
41         return false;
42     }
43     $('btn1').onclick=function(event)
44     {
45         var e=event || window.event;
46         alert('the window is closed!');
47     }
48 });
49 </script>
50 </head>
51 
52 <body>
53 <input type="button" id="btn1" value="Click" />
54 <id="a1" href="http://www.cnblogs.com">link </a>
55 </body>
56 </html>
57 

 

-------------------------------  

posted @ 2010-06-22 09:26  mcjeremy  阅读(3469)  评论(27编辑  收藏  举报
------------------------------------ 心静似高山流水不动,心清若巫峰雾气不沾 ------------------------------------