今天总结一下js中几个对象的区别和用法:
1.首先来说说 parent.window与top.window的用法
"window.location.href","location.href" 是本页面跳转
"parent.location.href" 是上一层页面跳转
"top.location.href" 是最外层的页面跳转
举例说明:
如果A,B,C,D都是窗口,D是C的iframe,C是B的iframe,B是A的iframe,
D -> C -> B-> A 框架顺序 A是最外层的框架
如果D中js这样写
"window.location.href"、"location.href": D页面跳转
"parent.location.href": C页面跳转
"top.location.href": A页面跳转
现在终于明白了连接的时候target的用法了:
_blank: 重新打开一个窗口
_parent:父窗口执行重定向
_self: 自身页面重定向
_top: 第一个父窗口重定向
综上所述可知:parent.window:父窗口对象 top.window:第一个父窗口的对象
window.parent 是iframe页面调用父页面对象,当我们想从iframe内嵌的页面中访问外层页面是可以直接利用window.parent获取;
例子如下:
A.html
<html> <head> <title>父页面</title> </head> <body> <form id="form1" action=""> <div> 输入值: <input type="text" name="username" id="username" /><br /> <iframe src="b.html" width="400px" height="300px"></iframe> </div> </form> </body> </html>
B.html
<html> <head> <script type="text/javascript"> function getpValue() { document.getElementByIdx_x_x_x("span1").innerText=window.parent.document.getElementByIdx_x_x_x("username").value; } </script> </head> <body> <span>文本框值为:</span><span id="span1"></span><br /> <input type="button" value="获取父窗口内的文本框值" onclick="getpValue();"> </body> </html>
document.frames对象可以引用iframe里的页面,也可以引用frameset里的页面.
可以这样
document.frames[0].document.getElementById('xx');
可以这样
document.frames[0].document.body.innerHTML;
window.opener 是window.open或超链接<a> 打开的子页面调用父页面对象
例子如下
a.html
<html> <head> <title>父页面</title> <script type="text/javascript"> function openB() { window.open('b.html','b','width=400,height=200,status=no,toolbar=no,menubar=no,location=no,resizable=yes,left=200,top=100'); } </script> </head> <body> <form id="form1" action=""> <div> 输入值: <input type="text" name="username" id="username" /><br /> <input type="button" value="打开窗口B" onclick="openB();" /><br /> <a href="b.html" target="_blank">超链接打开B页面</a> </div> </form> </body> </html>
b.html
<html> <head> <script type="text/javascript"> function getpValue() { document.getElementByIdx_x_x_x("span1").innerText=window.opener.document.getElementByIdx_x_x_x("username").value; } </script> </head> <body> <span>文本框值为:</span><span id="span1"></span><br /> <input type="button" value="获取父窗口内的文本框值" onclick="getpValue();"> </body> </html>