(ZZ)Frameset,Frame跟IFrame _Web前端

(ZZ)Frameset,Frame和IFrame

?一: <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>

在这个例子当中，<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：框架的名字，用来进行识别。

???三: 下面是我写通讯录时用到的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>

???? 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>

?? 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>

?? 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>

本文出自 “夜狼” 博客，请务必保留此出处http://yangfei520.blog.51cto.com/1041581/352938