iframe布局 详细用法 及缺点
2014-03-18 10:43
411 查看
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，这是为什么呢?也许新手还不知道它有什么坏处，相信你看完这篇文章就可以明白其中的原理。将Iframe用于网站设计是一种很不明智的做法，你可以尝试去点击Iframe布局的网站，你就能体会滚动条的麻烦了。
网站设计使用Iframe缺点一：得罪搜索引擎“蜘蛛”
网站设计使用Iframe最大的弊端就是得罪了搜索引擎的“蜘蛛”，当蜘蛛访问Iframe布局的网站时，它只会看到框架，框架里面的内容是看不到的，也就无法按照顺序解读页面，会认为这个网站是个死站点，以后绝不会再来了。
网站设计使用Iframe缺点二：链接导航问题
使用Iframe布局必须保证正确设定导航链接，否则，被链接的页面呈现在导航框架内，让浏览者无法退后，只能离开。
网站设计使用Iframe缺点三：分散访问者注意力
Iframe布局的网站除了有时会让浏览者迷惑，分散注意力之外，还会给浏览者带来浏览麻烦，滚动条会使Iframe布局混乱，让浏览者望而止步。
当然，也不是网站中完全不使用iframe，iframe还是有优点的，例如在静态页中可以导入动态内容，功能使用的方便等等。只要在适当的时候使用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，这是为什么呢?也许新手还不知道它有什么坏处，相信你看完这篇文章就可以明白其中的原理。将Iframe用于网站设计是一种很不明智的做法，你可以尝试去点击Iframe布局的网站，你就能体会滚动条的麻烦了。
网站设计使用Iframe缺点一：得罪搜索引擎“蜘蛛”
网站设计使用Iframe最大的弊端就是得罪了搜索引擎的“蜘蛛”，当蜘蛛访问Iframe布局的网站时，它只会看到框架，框架里面的内容是看不到的，也就无法按照顺序解读页面，会认为这个网站是个死站点，以后绝不会再来了。
网站设计使用Iframe缺点二：链接导航问题
使用Iframe布局必须保证正确设定导航链接，否则，被链接的页面呈现在导航框架内，让浏览者无法退后，只能离开。
网站设计使用Iframe缺点三：分散访问者注意力
Iframe布局的网站除了有时会让浏览者迷惑，分散注意力之外，还会给浏览者带来浏览麻烦，滚动条会使Iframe布局混乱，让浏览者望而止步。
当然，也不是网站中完全不使用iframe，iframe还是有优点的，例如在静态页中可以导入动态内容，功能使用的方便等等。只要在适当的时候使用iframe就可以了.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- IE8开发人员工具教程（二）
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法
- javascript asp教程第六课-- response方法
- javascript asp教程More About Recordsets
- javascript asp教程第十二课---session对象
- javascript asp教程创建数据库连接
- javascript asp教程错误处理
- javascript asp教程第十课--global asa
- JQuery与iframe交互实现代码
- 用expression的一行代码解决iframe挂马的问题
- javascript asp教程第十一课--Application 对象
- Firefox返回时Iframe的显示Bug的解决方法
- javascript 获取特定的 CSS属性值
- JAVASCRIPT IE 与 FF 中兼容写法记录
- javascript横排竖排标准选项卡效果代码