top,self,parent,open,href,location 详细解释
关于这几个常用的脚本关键字，很多人经常会很不明白，现在我采用下面的方式相信能很快明白：(如果A,B,C,D,Page都是htm，D是C的iframe，C是B的iframe，B是A的iframe，Page是公共呈现页面。如果D中js这样写)
大致页面的源码如下：
D.htm
<!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>
<title></title>
<script type="text/javascript">
/*注释部分与非注释部分等价*/
/*iframe嵌套关系是A->B->C->D*/
function fun1() {
window.open("Page.htm", "_blank");
// = window.open("");
<!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>
<title></title>
</head>
<body>
<h1 style="color: Purple; font-size: xx-large; font-weight: bolder;">
你进入了Page.htm</h1>
</body>
</html>
}
function fun2() {
location.href = "Page.htm";
//= window.location.href = self.location.href = "Page.htm"; //在D页面实现展现
//=window.open("Page.htm", "_self"); //在D页面实现展现
}
function fun3() {
parent.location.href = "Page.htm"
// = window.parent.location.href = "Url地址"; //在C页面实现展现
//=window.open("Page.htm", "_parent"); //在C页面实现展现
}
function fun4() {
top.location.href = "Page.htm"
// = window.top.location.href = "Page.htm"; //在A页面实现展现
// =window.open("Page.htm", "_top")//在A页面实现展现
}
function fun5() {
parent.parent.location = "Page.htm"; //在B页面实现展现
//=parent.open("Page.htm", "_parent") = parent.parent.open("Page.htm", "_self") //在B页面实现展现
}
</script>
</head>
<body>
<h1 style="color: Red;">
D</h1>
<input type="button" id="btn1" value="window.open" onclick="fun1()" /><br />
<input type="button" id="btn2" value="location.href" onclick="fun2()" /><br />
<input type="button" id="btn3" value="parent.location.href" onclick="fun3()" /><br />
<input type="button" id="btn4" value="top.location.href" onclick="fun4()" /><br />
<input type="button" id="btn5" value="parent.parent.location" onclick="fun5()" /><br />
</body>
</html>
C.htm
<!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>
<title></title>
</head>
<body>
<h1 style="color: Yellow;">
C</h1>
<iframe src="D.htm" style="width: 600px; height: 800px"></iframe>
</body>
</html>
Page.htm
<!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>
<title></title>
</head>
<body>
<h1 style="color: Purple; font-size: xx-large; font-weight: bolder;">
你进入了Page.htm</h1>
</body>
</html>
A.htm 效果如下：
从上至下一次点击五个按钮效果如下：
1.
2.
3.
4.
5.
本文转自网上：
http://apps.hi.baidu.com/share/detail/18034464
分享到：
相关推荐
一、location.href常见的几种形式 self.location.href;//当前页面打开URL页面 ...①如果页面中自定义了frame，那么可将parent、self、top换为自定义frame的名称,效果是在frame窗口打开url地址。 ②此
用iframe、弹出子页面刷新父页面 iframe parent.location.reload(); 弹出子页面 window.opener.location.reload(); 子窗口刷新父窗口 self.window.opener.locaction.reload(); 刷新一open（）方法打开的窗口 ...
熟练掌握window对象的status、location、name、self、opener属性的使用 Window对象是客户端javascript最高层对象之一，只要打开浏览器窗口，不管该窗口中是否有打开的网页，当遇到BODY、FRAMESET或FRAME元素时，...
用iframe、弹出子页面刷新父页面iframe [removed] parent.location.reload(); [removed] 弹出子页面 [removed] window.opener.location.reload(); [removed] 子窗口刷新父窗口 [removed] self.opener.location....
1.用iframe、弹出子页面刷新父页面iframe [removed] parent.location.reload(); [removed] 2.弹出子页面 [removed] window.opener.location.reload(); [removed] 3.子窗口刷新父窗口 [removed] self.opener....
19.窗口:打开窗口window.open(), 关闭一个窗口:window.close(), 窗口本身:self 20.状态栏的设置:window.status="字符"; 21.弹出提示信息:window.alert("字符"); 22.弹出确认框:window.confirm(); 23.弹出输入提示框:...
19.窗口:打开窗口window.open(), 关闭一个窗口:window.close(), 窗口本身:self "fullscreen=no,channelmode=no,toolbar=no,location=no,menubar=no,scrollbas=no,resizable=no," 20.状態栏的设置:window.status=...
13) 一个窗口中的任何框架都可以使用属性frames、parent和top引用窗口中的其它框架。 14) 若框架指定了名字，引用就会被存储到它的父Window对象的一个同名新属性中。 15) 自定义的函数和构造函数只在定义它的窗口中...
Added TFlexFileFormat.StreamSupport property (default True), which difines, is it necessary to open file stream or give the file name only. - FIX: If the TCustomProp.Assign method calls when the ...
I. Spring Boot Documentation 1. About the Documentation 2. Getting Help 3. First Steps 4. Working with Spring Boot ...58.2. Cloud Foundry Self-signed Certificates 58.3. Custom context path 59...
Alternatively, there's an "expand all" at the top of this document. Background C++ is the main development language used by many of Google's open-source projects. As every C++ programmer knows, the...