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
扫一扫
551
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
