有道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
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 <a 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同学的回复处查看)
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 <a id="a1" href="http://www.cnblogs.com">link </a>
55 </body>
56 </html>
57
-------------------------------
心静似高山流水不动,心清若巫峰雾气不沾。
</h3>