相信大家在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
<
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同学的回复处查看)
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
<
a
id
="a1"
href
="http://www.cnblogs.com"
>
link
</
a
>
55
</
body
>
56
</
html
>
57
-------------------------------