您的位置：首页 > Web前端 > JavaScript

javascript基础-窗口对象(window)

2016-05-07 22:28 627 查看

1.top
该变更永远指分割窗口最高层次的浏览器窗口。如果计划从分割窗口的最高层次开始执行命令，就可以用top变量。
2.opener
opener用于在window.open的页面引用执行该window.open方法的的页面的对象。例如：A页面通过window.open()方法弹出了B页面，在B页面中就可以通过opener来引用A页面，这样就可以通过这个对象来对A页面进行操作。
3.parent
parent用于在iframe,frame中生成的子页面中访问父页面的对象。例如：A页面中有一个iframe或frame，那么iframe或frame中的页面就可以通过parent对象来引用A页面中的对象，这样就可以获取或返回值到A页面中。
4.另外self 指的是当前窗口
（1）window.top
（2）window.opener
（3）window.parent
（4）self
利用<frameset>、<frame>给主页面划分窗口top、left、right，将主页面划分成三个页面窗口

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<frameset rows="20%,*">
<frame src="top.html" name="top"/>
<frameset cols="30%,*">
<frame src="left.html" name="left"/>
<frame src="right.html" name="right"/>
</frameset>
</frameset><noframes></noframes>

</html>

top页面窗口

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
function demo(){
parent.frames[0].document.bgColor="blue";
alert(parent.frames.length);
}
</script>
</head>

<body>
<input type="button" value="颜色" onclick="demo()" />
<a href="http://www.google.com" target="right">谷歌</a>
</body>
</html>

left页面窗口

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function demo(){
parent.frames[0].location.href="http://www.baidu.com";
}
</script>
</head>

<body>
<input type="button" value="百度" onclick="demo()" />
</body>
</html>

right页面窗口

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function demo(){
parent.frames[1].location.href="http://www.sina.com";
}
</script>
</head>

<body>
<a href="javascript:demo()">新浪</a>
</body>
</html>

（5）parent与opener的区别 parent指父窗口，在frameset中frame的parent就是frameset窗口； opener指用window.open等方式创建的新窗口对应的原窗口； parent是相对于框架来说父窗口对象； opener是针对于用window.open打开的窗口来说的父窗口，前提是window.open打开的才有document.parentWindow.menthod()調用父頁面的方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function demo(){
window.open("3-4.html");
}
</script>
</head>
<body>
<input type="button"  value="点击" onclick="demo()" />
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
document.parentWindow.document.bgColor="red";
</script>
</head>

<body>
</body>
</html>

附：Window对象、Parent对象、Frame对象、Document对象和Form对象的阶层关系Window对象→Parent对象→Frame对象→Document对象→Form对象，如下： parent.frame1.document.forms[0].elements[0].value;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： window top opener

相关文章推荐

新的分享

章节导航