thoreau
thoreau

Iframe 详解

转自：http://blog.chinaunix.net/uid-450400-id-2119164.html

 

frame与Iframe的各项属性  

frame例子：
<frameset cols="50%,*">
  <noframes>
   <body>
   Sorry,your explorer doesn't support the frame...
   </body>
  </noframes>
 <frame name="left" src="left.html">
 <frameset rows="*,30%">
    <frame name="right_top" src="right.html">
    <frame name="right_bottom" src="right2.html">
 </frameset>
</frameset>

    Iframe标记，又叫浮动帧标记，你可以用它将一个HTML文件嵌入在另一个HTML中显示。它不同于Frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件相互独立显示，而是可以直接嵌入在一个HTML文件中，与这个HTML文件内容相互融合，成为一个整体，另外，还可以多次在一个页面内显示同一内容，而不必重复写内容，甚至可以在同一HTML文件嵌入多个HTML文件。
　　在脚本语言与对象层次中，包含Iframe的窗口我们称之为父窗体，而浮动帧则称为子窗体，弄清这两者的关系很重要，因为要在父窗体中访问子窗体或子窗体中访问父窗体都必须清楚对象层次，才能通过程序来访问并控制窗体。
下面是浮动帧标记Iframe的各项属性：

一、基本语法：
　　<iframe>……</iframe>
　　浮动帧标记Iframe必须成对出现，即有开始标记<iframe>，就必须有结束标记</iframe>。

二、浮动帧标记Iframe的属性：

　1、文件位置：

　　语法：src=url
　　说明：url为嵌入的HTML文件的位置，可以是相对地址，也可以是绝对地址。
　　示例：<iframe src="iframe.html">

　2、对象名称：
　　语法：name=#
　　说明：#为对象的名称。该属性给对象取名，以便其他对象利用。
　　示例：<iframe src="iframe.html" name="iframe1">

　3、ID选择符：
　　语法：id=#
　　说明：指定该标记的唯一ID选择符。
　　示例：<iframe src="iframe.html" id="iframe1">

　4、容器属性：
　　语法：height=# width=#
　　说明：该属性指定浮动帧的高度和宽度。取值为正整数（单位为像素）或百分数。
　　height：指定浮动帧的高度；
　　width：指定浮动帧的宽度。
　　示例：<iframe src="iframe.html" height=400 width=400>

　5、尺寸调整：
　　语法：noresize
　　说明：IE专有属性，指定浮动帧不可调整尺寸。
　　示例：<iframe src="iframe.html" noresize>

　6、边框显示：
　　语法：frameborder=0、1
　　说明：该属性规定是否显示浮动帧边框。
　　0：不显示浮动帧边框；
　　1：显示浮动帧边框。
　　示例：<iframe src="iframe.html" frameborder=0>
　　　　　<iframe src="iframe.html" frameborder=1>

　7、边框厚度：
　　语法：border=#
　　说明：该属性指定浮动帧边框的厚度，取值为正整数和0，单位为像素。为了将浮动帧与页面无缝结合，border一般等于0。
　　示例：<iframe src="iframe.html" border=1>

　8、边框颜色：
　　语法：bordercolor=color
　　说明：该属性指定浮动帧边框的颜色。color可以是RGB色（RRGGBB），也可以是颜色名。
　　示例：<iframe src="iframe.html" bordercolor=red>

　9、对齐方式：
　　语法：align=left、right、center
　　说明：该属性指定浮动帧与其他对象的对齐方式。
　　left：居左；
　　right：居右；
　　center：居中。
　　示例：<iframe src="iframe.html" align=left>
　　　　　<iframe src="iframe.html" align=right>
　　　　　<iframe src="iframe.html" align=center>

　10、相邻间距：
　　语法：framespacing=#
　　说明：该属性指定相邻浮动帧之间的间距。取值为正整数和0，单位为像素。
　　示例：<iframe src="iframe.html" framespacing=10>

　11、内补白属性：
　　语法：hspace=# vspace=#
　　说明：该属性指定浮动帧内的边界大小。取值为正整数和0，单位为像素。两个属性应同时应用。
　　hspace：浮动帧内的左右边界大小；
　　vspace：浮动帧内的上下边界大小。
　　示例：<iframe src="iframe.html" hspace=1 vspace=1>

　12、外补白属性：
　　语法：marginheight=# marginwidth=#
　　说明：该属性指定浮动帧的边界大小。取值为正整数和0，单位为像素。两个属性应同时应用。 
　　marginheight：浮动帧的左右边界大小；
　　marginwidth：浮动帧的上下边界大小。
　　示例：<iframe src="iframe.html" marginheight=1 marginwidth=1>
 
附.

iframe自适应高度和宽度 

高度
<iframe name="myframe1" src="myframe1.htm" frameborder="0" scrolling="auto" width="100%" height="100%" onload="document.all['myframe'].style.height=myframe.document.body.scrollHeight" ></iframe> 

宽度
<iframe name="myframe2" src="myframe2.htm" frameborder="0" scrolling="auto" width="100%" height="100%" onload="document.all['myframe'].style.width=myframe.document.body.scrollWidth" ></iframe> 
 
iframe的链接目标

"myframe1.htm"内容
<a href="http://www.163.com" target=_parent>www.163.com</a>

"myframe2.htm"内容
<a href="http://www.163.com" target=myframe1>www.163.com</a>

在子窗口关闭时如何reload父窗口中的iframe

现有一页面main.htm,在其中的一个div中有一iframe(src="listdateServ"),当点击  faq-it.org/debian/main.htm一个button时弹出一窗口chi.htm,填完chi.htm中的form再点击一submit,转  
到savedateServ去处理，处理完后转到一页面saveOK.htm。现在我要在saveOK.htm关闭时reload  iframe,如何做？  
---------------------------------------------------------------  
 
在saveOK.htm中(它和chi.htm是同一页)不然就opener.opener...  
<body  onbeforeunload="opener.document.frames['iframeName'].location.reload();return  true">  

用子窗口控制父窗口 
不多说，直接看代码：

父窗口：1.htm
<html>
<script language=javascript>

//插入表行
function insertRow1(){
 var tr1=f.insertRow();
 var td1=tr1.insertCell();
 var td2=tr1.insertCell();
 td1.innerText="1";
 td2.innerText="2";
}
</script>
<table id="f" border=1>
<tr>
 <td>1</td>
 <td>2</td>
</tr>
</table>
<input type="button" onclick="window.open('2.html')">
</html>

子窗口：2.htm 

<html> 
<script language="javascript">
function d(){
 alert("ss");
 alert(opener);
}
</script>
<input type="button" onclick="javascript:opener.insertRow1()">
</html>


如何在一个页面中的两个iframe中互相传值? 
---------iframe A-----------
parent.window.frames["bFrameName"].xxx();

------------iframe B---------------
function xxx()
{
   alert("date")
}

另,所有的在同一目录下面：

第一个页面：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="content-type" content="text/html" charset="GB2312">
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" src=""></script>
<script language="javascript" type="text/javascript"></script>
</HEAD>

<BODY>
<table border="1" align="left" width="60%">
<tr>
<td><iframe name="fa" src="a.html"></iframe></td>
<td><iframe name="fb" src="b.html"></iframe></td>
<tr>
</table>
</BODY>
</HTML>
/************a.html*******************/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> aaaaaaaaa </TITLE>
<meta http-equiv="content-type" content="text/html" charset="GB2312">
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" src=""></script>
<script language="javascript" type="text/javascript">
function control()
{
parent.frames['fb'].document.getElementById("button").style.display = 'block';
}
</script>
</HEAD>
/************b.html*******************/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> bbbbbbbbbbb </TITLE>
<meta http-equiv="content-type" content="text/html" charset="GB2312">
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" src=""></script>
<script language="javascript" type="text/javascript"></script>
</HEAD>

<BODY>
<INPUT TYPE="button" NAME="" style="display:none;" id="button" value="I'm here here!~~~~~~~~">
</BODY>
</HTML>

<BODY>
<input type="button" value="Display" style="cursor:hand;" onclick="control();return true;">
</BODY>
</HTML>

 

 

 

子窗口调用父窗口的javascript函数或其他

采用 使用iframe 方式

<!-- parent.html -->
<script language=javascript>
function funalert()
{
alert('OK');
}
</script>

<iframe name="myframe1" src="1.html" frameborder="0" border=0 scrolling="auto" width="100%" height="100%" onload="document.all['myframe'].style.height=myframe.document.body.scrollHeight" ></iframe>

<!-- 1.html -->
<a href="http://www.163.com" target=_parent>www.163.com</a>
<input type=button onclick="parent.funalert();self.close()" name=ddd value="OK">

如果没有使用iframe 方式,

<!-- parent.html -->
<a href=1.html target=_blank>Test</a>

<!-- 1.html -->
<input type=button onclick="opener.funalert();self.close()" name=ddd value="OK">

 

 

问：
嵌入的iframe窗口如何改变父窗口中相应的iframe窗口的宽度和高度？
______________________________________________________________________________________________
答1：
if(top.location != self.location)
    {
      var a = window.parent.document.getElementsByName(self.name);
          a[0].height = document.body.scrollHeight;
          a[0].width  = document.body.scrollWidth;
    }  

______________________________________________________________________________________________
答2：
top.Myiframe.style.width=
______________________________________________________________________________________________
答3：
meizz(梅花雨) 理解错误拉

top.Myiframe.style.width对于iframe是没有这个属性的；

好容易找到了
Msgbox parent.RightFrame.self.frameElement.clientHeight
parent.RightFrame.self.frameElement.clientHeight=600——这句出错，原来还是个只读书性

你可能感兴趣的:(iframe)