有道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 

 

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

你可能感兴趣的:(有道JavaScript监听浏览器的问题(附一解决方案))