一: <Frameset>为框架标记，说明该网页文档为框架组成，并设定文档中组成框架集的框架的布局，用来划分框架，每一个框架由<Frame></Frame>标记。
<Frame>用以设置组成框架集中各个框架的属性。<Frame></Frame>必须在<Frameset></Frameset>之内使用。比如：
<
FRAMESET border=1 frameSpacing=1borderColor=#47478d rows=* cols=180,*
>
< FRAME src ="inc/admin_left.htm"name=left scrolling=no id ="left" >
< FRAME src ="inc/admin_center.htm"name=main scrolling ="no" >
</FRAMESET>
< FRAME src ="inc/admin_left.htm"name=left scrolling=no id ="left" >
< FRAME src ="inc/admin_center.htm"name=main scrolling ="no" >
</FRAMESET>
在这个例子当中，<Frameset></Frameset>把页面分为左右两个部分，左侧框架中的页面是admin_left.htm，右侧框架中的页面是admin_center.htm。
注意：<Frame></Frame>标记的框架顺序为从左至右或从上到下。
二: Iframe是Inline Frame的缩写，称为内联框架，它和frame如同兄弟。frame是帧标记，Iframe叫浮动帧标记，它不同于Frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件相互独立显示，而是可以直接嵌入在一个HTML文件中，与这个HTML文件内容相互融合，成为一个整体；因为它可以多次在一个页面内显示同一内容，而不必重复写内容，所以人们形象称这种效果为“画中画”。 Iframe标记使用格式，比如：
<
Iframe
src
="URL"
width
="x"
height
="x"
scrolling
="[OPTION]"frameborder="x"name= "main"
>
</iframe>
在这个例子中，各个含义是:
src： 文件的路径，既可是HTML文件，也可以是文本、ASP等；
width、height：“内部框架”区域的宽与高；
scrolling：当SRC的指定的HTML文件在指定的区域内显示不完时的滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示滚动条。
FrameBorder：区域边框的宽度，只有0和1两个值，分别表示没有边框和有边框，为了让“内部框架”与邻近的内容相融合，常设置为0。
name：框架的名字，用来进行识别。
src： 文件的路径，既可是HTML文件，也可以是文本、ASP等；
width、height：“内部框架”区域的宽与高；
scrolling：当SRC的指定的HTML文件在指定的区域内显示不完时的滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示滚动条。
FrameBorder：区域边框的宽度，只有0和1两个值，分别表示没有边框和有边框，为了让“内部框架”与邻近的内容相融合，常设置为0。
name：框架的名字，用来进行识别。
三: 下面是我写通讯录时用到的iframe知识点，我抽取了出来，用两组父子页面展示给大家：[分两组页面,分别是在父子页面中操作]
1.child1.html
<
html
>
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
< title >Insert title here </title>
< script type ="text/javascript" >
function c(){
alert(document.getElementById("childTextId").value);
}
</script>
</head>
< body >
< form action="" >
< input type ="text" value ="child text" id ="childTextId" name ="childTextName" >
< input type ="text" id ="childTextId2" name ="childTextName2" >
< input type ="text" id ="childTextId3" name ="childTextName3" >
</form>
</body>
</html>
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
< title >Insert title here </title>
< script type ="text/javascript" >
function c(){
alert(document.getElementById("childTextId").value);
}
</script>
</head>
< body >
< form action="" >
< input type ="text" value ="child text" id ="childTextId" name ="childTextName" >
< input type ="text" id ="childTextId2" name ="childTextName2" >
< input type ="text" id ="childTextId3" name ="childTextName3" >
</form>
</body>
</html>
parent1.html
<
html
>
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
< title >Insert title here </title>
< script type ="text/javascript" >
function p(){
//在父页面中,取得子页面的内容赋给父页面[方式一]
document.getElementById('parentTextId1').value=window.frames["iframeName"].document.all('childTextName').value;
//在父页面中,取得子页面的内容赋给父页面[方式二]
document.getElementById('parentTextId2').value=iframeName.document.getElementById("childTextId").value;
}
function p2(){
//在父页面中,调用iframe子页面的JS函数
iframeName.window.c();
}
function p3(){
//在父页面中,取得本页面的内容赋给子页面[方式一]
window.frames["iframeName"].document.all('childTextName2').value=document.getElementById('parentTextId1').value;
//在父页面中,取得本页面的内容赋给子页面[方式二]
iframeName.document.getElementById("childTextId3").value=document.getElementById('parentTextId2').value;
}
</script>
</head>
< body >
< form action="" >
< input type ="text" id ="parentTextId1" >
< input type ="text" id ="parentTextId2" >
< input type ="button" onclick ="p();" value ="p" >
< input type ="button" onclick ="p2();" value ="p2" >
< input type ="button" onclick ="p3();" value ="p3" >
</form>
< iframe src ="c.html" name ="iframeName" > </iframe>
</body>
</html>
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
< title >Insert title here </title>
< script type ="text/javascript" >
function p(){
//在父页面中,取得子页面的内容赋给父页面[方式一]
document.getElementById('parentTextId1').value=window.frames["iframeName"].document.all('childTextName').value;
//在父页面中,取得子页面的内容赋给父页面[方式二]
document.getElementById('parentTextId2').value=iframeName.document.getElementById("childTextId").value;
}
function p2(){
//在父页面中,调用iframe子页面的JS函数
iframeName.window.c();
}
function p3(){
//在父页面中,取得本页面的内容赋给子页面[方式一]
window.frames["iframeName"].document.all('childTextName2').value=document.getElementById('parentTextId1').value;
//在父页面中,取得本页面的内容赋给子页面[方式二]
iframeName.document.getElementById("childTextId3").value=document.getElementById('parentTextId2').value;
}
</script>
</head>
< body >
< form action="" >
< input type ="text" id ="parentTextId1" >
< input type ="text" id ="parentTextId2" >
< input type ="button" onclick ="p();" value ="p" >
< input type ="button" onclick ="p2();" value ="p2" >
< input type ="button" onclick ="p3();" value ="p3" >
</form>
< iframe src ="c.html" name ="iframeName" > </iframe>
</body>
</html>
2.child2.html
<
html
>
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
< title >Insert title here </title>
< script type ="text/javascript" >
function c1(){
//在子页面中,取得本页面的内容赋给父页面
parent.document.getElementById("t").innerHTML=document.getElementById('childTextId').value;
}
function c2(){
//在子页面中,调用iframe父页面的JS函数
window.parent.showTextarea();
}
</script>
</head>
< body >
< form action="" >
< input type ="text" id ="childTextId" name ="childTextName" value ="childText" >
< input type ="button" onclick ="c1();" value ="c1" >
< input type ="button" onclick ="c2();" value ="c2" >
</form>
</body>
</html>
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
< title >Insert title here </title>
< script type ="text/javascript" >
function c1(){
//在子页面中,取得本页面的内容赋给父页面
parent.document.getElementById("t").innerHTML=document.getElementById('childTextId').value;
}
function c2(){
//在子页面中,调用iframe父页面的JS函数
window.parent.showTextarea();
}
</script>
</head>
< body >
< form action="" >
< input type ="text" id ="childTextId" name ="childTextName" value ="childText" >
< input type ="button" onclick ="c1();" value ="c1" >
< input type ="button" onclick ="c2();" value ="c2" >
</form>
</body>
</html>
parent2.html
<
html
>
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
< title >Insert title here </title>
< script type ="text/javascript" >
function showTextarea(){
alert(document.getElementById("t").value);
}
</script>
</head>
< body >
< textarea rows ="0" cols ="0" id ="t" > </textarea>
< iframe src ="c2.html" name ="iframeName" > </iframe>
</body>
</html>
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
< title >Insert title here </title>
< script type ="text/javascript" >
function showTextarea(){
alert(document.getElementById("t").value);
}
</script>
</head>
< body >
< textarea rows ="0" cols ="0" id ="t" > </textarea>
< iframe src ="c2.html" name ="iframeName" > </iframe>
</body>
</html>
本文转自NightWolves 51CTO博客，原文链接：
http://blog.51cto.com/yangfei520/352938
，如需转载请自行联系原作者
