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
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<scripttype="text/javascript">
/*注释部分与非注释部分等价*/
/*iframe嵌套关系是A->B->C->D*/
functionfun1() {
window.open("Page.htm", "_blank");
// = window.open("");
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h1style="color: Purple; font-size: xx-large; font-weight: bolder;">
你进入了Page.htm</h1>
</body>
</html>
}
functionfun2() {
location.href = "Page.htm";
//= window.location.href = self.location.href = "Page.htm"; //在D页面实现展现
//=window.open("Page.htm", "_self"); //在D页面实现展现
}
functionfun3() {
parent.location.href = "Page.htm"
// = window.parent.location.href = "Url地址"; //在C页面实现展现
//=window.open("Page.htm", "_parent"); //在C页面实现展现
}
functionfun4() {
top.location.href = "Page.htm"
// = window.top.location.href = "Page.htm"; //在A页面实现展现
// =window.open("Page.htm", "_top")//在A页面实现展现
}
functionfun5() {
parent.parent.location = "Page.htm"; //在B页面实现展现
//=parent.open("Page.htm", "_parent") = parent.parent.open("Page.htm", "_self") //在B页面实现展现
}
</script>
</head>
<body>
<h1style="color: Red;">
D</h1>
<inputtype="button"id="btn1"value="window.open"onclick="fun1()"/><br/>
<inputtype="button"id="btn2"value="location.href"onclick="fun2()"/><br/>
<inputtype="button"id="btn3"value="parent.location.href"onclick="fun3()"/><br/>
<inputtype="button"id="btn4"value="top.location.href"onclick="fun4()"/><br/>
<inputtype="button"id="btn5"value="parent.parent.location"onclick="fun5()"/><br/>
</body>
</html>
C.htm
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h1style="color: Yellow;">
C</h1>
<iframesrc="D.htm"style="width: 600px; height: 800px"></iframe>
</body>
</html>
Page.htm
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h1style="color: Purple; font-size: xx-large; font-weight: bolder;">
你进入了Page.htm</h1>
</body>
</html>
A.htm 效果如下：
从上至下一次点击五个按钮效果如下：
1.
2.
3.
4.
5.