iframe布局详细用法及缺点

冷不防 2022-08-26 00:43 200阅读 0赞

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%" οnlοad="document.all\['myframe'\].style.height=myframe.document.body.scrollHeight" ></iframe>

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

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

"myframe2.htm"内容  
<a href="[http://www.163.com][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  οnbefοreunlοad="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" οnclick="window.open('2.html')">  
</html>

子窗口：2.htm

<html>  
<script language="javascript">  
function d()\{  
 alert("ss");  
 alert(opener);  
\}  
</script>  
<input type="button" οnclick="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>

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

采用 使用iframe 方式

<script language=javascript>  
function funalert()  
\{  
alert('OK');  
\}  
</script>

<a href="[http://www.163.com][http_www.163.com]" target=\_parent>www.163.com</a>  
<input type=button οnclick="parent.funalert();self.close()" name=ddd value="OK">

如果没有使用iframe 方式,

<a href=1.html target=\_blank>Test</a>

<input type=button οnclick="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，这是为什么呢?也许新手还不知道它有什么坏处，相信你看完这篇文章就可以明白其中的原理。将Iframe用于网站设计是一种很不明智的做法，你可以尝试去点击Iframe布局的网站，你就能体会滚动条的麻烦了。

网站设计使用Iframe缺点一：得罪搜索引擎“蜘蛛”

网站设计使用Iframe最大的弊端就是得罪了搜索引擎的“蜘蛛”，当蜘蛛访问Iframe布局的网站时，它只会看到框架，框架里面的内容是看不到的，也就无法按照顺序解读页面，会认为这个网站是个死站点，以后绝不会再来了。

网站设计使用Iframe缺点二：链接导航问题

使用Iframe布局必须保证正确设定导航链接，否则，被链接的页面呈现在导航框架内，让浏览者无法退后，只能离开。

网站设计使用Iframe缺点三：分散访问者注意力

Iframe布局的网站除了有时会让浏览者迷惑，分散注意力之外，还会给浏览者带来浏览麻烦，滚动条会使Iframe布局混乱，让浏览者望而止步。

当然，也不是网站中完全不使用iframe，iframe还是有优点的，例如在静态页中可以导入动态内容，功能使用的方便等等。只要在适当的时候使用iframe就可以了.