<frameset>、<frame>、<iframe>這3個html元素的差別，可以參考這篇文章"frame,iframe,frameset之間的關系與差別"。标準的使用方式如下：
<!--iframe 是在html頁面内嵌入架構架構内可以連接配接另一個頁面-->
<html>
<head></head>
<body>
<iframe src="xxx.html"></iframe>
</body>
</html>
<!--frameset在一個頁面中設定一個或多個架構,不能嵌套在body标簽裡-->
<html>
<head></head>
<frameset>
<frame src=""></frame>
<frame src=""></frame>
</frameset>
</html>
可以看到a.html能夠通過<frameset>或者<iframe>包含另一個b.html，而b.html中也可以用同樣的方式嵌套c.html。這樣就在不同的html之間形成了明顯的層次(父子)關系。我們知道每一個html都對應1個js的window對象，既然html有層次關系，window對象也同樣有層次關系，而這層次關系就是通過top和parent、self這3個屬性來表現的。
1.在任何html頁面中(window.self == window)，self和window都是擷取目前視窗自身的window對象。
2.top用來擷取最頂層的視窗對象，而parent隻是擷取目前視窗的父視窗。如果目前視窗是最頂層的視窗，那麼window.parent == window.top == window.self。如果a.html-->b.html-->c,html通過<frameset>或者<iframe>形成了層次關系，那麼在c.html中，window.parent擷取的是b.html的視窗，window.top擷取的是a.html的視窗。
3.通過<a>打開的頁面和原來頁面之前沒有這種父子關系。
現在我們知道了html頁面之間的這種層次關系，現在我們看下不同html之間如何擷取彼此的資料。參考“在同一個頁面中的一個iframe中用js擷取另一個iframe的dom”這篇文章。
main.html
<html>
<script>
function init()
{
var obj1=document.getElementById("myframe");
alert(obj1.src);
//alert(obj1.window.document.myform.username.value);//錯誤
var obj2=document.frames("myframe");
alert(obj2.window.document.myform.username.value);
//alert(obj2.src);//錯誤
}
</script>
<body οnlοad="init();">
<iframe id="myframe" name="myframe" src="child.html" frame style="width:300;height:200;">
</iframe>
</body>
</html>
child.html
<html>
<body>
<form name="myform">
使用者名：<input type="text" name="username" value="test" />
</form>
</body>
</html>
可以看到關鍵就是通過:window.document.getElementById()和window.document.frames擷取<iframe>标簽的屬性，或者<iframe>标簽加載的html頁面的文檔資料。
![html+css寫三角形[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)