iframe 的详细用法

对象

对象描述
runtimeStyle 代表了居于全局样式表、内嵌样式和 HTML 标签属性指定的格式和样式之上的对象的格式和样式。
style 代表了给定元素所有可能的内嵌样式的当前设置。

样式

样式标签属性样式属性描述
ACCELERATOR accelerator 设置或获取表明对象是否包含快捷键的字符串。
background-attachment backgroundAttachment 设置或获取背景图像如何附加到文档内的对象中。
background-color backgroundColor 设置或获取对象内容后的颜色。
background-position-x backgroundPositionX 设置或获取 backgroundPosition 属性的 x 坐标。
background-position-y backgroundPositionY 设置或获取 backgroundPosition 属性的 y 坐标。
beh***ior beh***ior 设置或获取 DHTML 行为的位置。
border-bottom borderBottom 设置或获取对象下边框的属性。
border-bottom-color borderBottomColor 设置或获取对象下边框的颜色。
border-bottom-style borderBottomStyle 设置或获取对象下边框的样式。
border-bottom-width borderBottomWidth 设置或获取对象下边框的宽度。
border-color borderColor 设置或获取对象的边框颜色。
border-left borderLeft 设置或获取对象左边框的属性。
border-left-color borderLeftColor 设置或获取对象左边框的颜色。
border-left-style borderLeftStyle 设置或获取对象左边框的样式。
border-left-width borderLeftWidth 设置或获取对象左边框的宽度。
border-right borderRight 设置或获取对象右边框的属性。
border-right-color borderRightColor 设置或获取对象右边框的颜色。
border-right-style borderRightStyle 设置或获取对象右边框的样式。
border-right-width borderRightWidth 设置或获取对象右边框的宽度。
border-style borderStyle 设置或获取对象上下左右边框的样式。
border-top borderTop 设置或获取对象上边框的属性。
border-top-color borderTopColor 设置或获取对象上边框的颜色。
border-top-style borderTopStyle 设置或获取对象上边框的样式。
border-top-width borderTopWidth 设置或获取对象上边框的宽度。
border-width borderWidth 设置或获取对象上下左右边框的宽度。
bottom bottom 设置或获取对象相对于文档层次中下个定位对象的底部的位置。
clear clear 设置或获取对象是否允许在其左侧、右侧或两边放置浮动对象，以防下段文本显示在浮动对象上。
clip clip 设置或获取定位对象的哪个部分可见。
cursor cursor 设置或获取当鼠标指针指向对象时所使用的鼠标指针。
display display 设置或获取对象是否要渲染。
filter filter 设置或获取应用于对象的滤镜或滤镜集合。
height height 设置或获取对象的高度。
layout-grid layoutGrid 设置或获取指定文本字符版面的组合文档格线属性。
layout-grid-mode layoutGridMode 设置或获取文本布局网格是否使用二维。
left left 设置或获取对象相对于文档层次中下个定位对象的左边界的位置。
margin margin 设置或获取对象的上下左右边距。
margin-bottom marginBottom 设置或获取对象的下边距宽度。
margin-left marginLeft 设置或获取对象的左边距宽度。
margin-right marginRight 设置或获取对象的右边距宽度。
margin-top marginTop 设置或获取对象的上边距宽度。
overflow-x overflowX 设置或获取当内容超出对象宽度时如何管理对象内容。
overflow-y overflowY 设置或获取当内容超出对象高度时如何管理对象内容。
pixelBottom 设置或获取对象的下方位置。
pixelHeight 设置或获取对象的高度。
pixelLeft 设置或获取对象的左侧位置。
pixelRight 设置或获取对象的右侧位置。
pixelTop 设置或获取对象的上方位置。
pixelWidth 设置或获取对象的宽度。
posBottom 设置或获取以 bottom 标签属性指定的单位的对象下方位置。
posHeight 设置或获取以 height 标签属性指定的单位的对象高度。
position position 设置或获取对象所使用的定位方式。
posLeft 设置或获取以 left 标签属性指定的单位的对象左侧位置。
posRight 设置或获取以 right 标签属性指定的单位的对象右侧位置。
posTop 设置或获取以 top 标签属性指定的单位的对象上方位置。
posWidth 设置或获取以 width 标签属性指定的单位的对象宽度。
right right 设置或获取对象相对于文档层次中下个已定位的对象的右边界的位置。
float styleFloat 设置或获取文本要绕排到对象的哪一侧。
text-autospace textAutospace 设置或获取自动留空和文本的窄空间宽度调整。
top top 设置或获取对象相对于文档层次中下个定位对象的上边界的位置。
visibility visibility 设置或获取对象的内容是否显示。
z-index zIndex 设置或获取定位对象的堆叠次序。
zoom zoom 设置或获取对象的放大比例。

注释

IFRAME 元素也就是文档中的文档，或者好像浮动的框架(FRAME)。frames 集合提供了对 IFRAME 内容的访问。请使用 frames 集合读写 IFRAME 内包含的元素。例如，如果要访问 iframe 内 body 对象的 backgroundColor 样式，语法应为:

sColor = document.frames("sFrameName").document.body.style.backgroundColor;

通过 iframe 对象所在页面的对象模型，你可以访问 iframe 对象的属性，但不能访问其内容。例如，访问 iframe 对象的 border 样式的语法应为:

sBorderValue = document.all.oFrame.style.border;

注意 iframe 的属性必须使用前缀 document.all 访问，例如 document.all.iframeId.marginWidth。
Internet Explorer 5.5 支持浮动框架的内容透明。如果想要为浮动框架定义透明内容，则必须满足下列条件。

与 IFRAME 元素一起使用的 ALLOWTRANSPARENCY 标签属性必须设置为 true。
在 IFRAME 内容源文档，background-color 或 BODY 元素的 BGCOLOR 标签属性必须设置为 transparent。
参看使用透明的浮动框架可以获得关于透明浮动框架更多的信息。

此元素在 Microsoft?Internet Explorer 4.0 的 HTML 和脚本中可用。

此元素是一个块元素。

此元素需要关闭标签。

示例

下面的例子使用了 IFRAME 元素创建了包含页面 sample.htm 的框架。

下面的例子返回了对 IFRAME 包含的文档的 all 集合的引用。

var collAll = document.frames("IFrame1").document.all

详细用法:

<IFRAME>用于设置文本或图形的浮动图文框或容器。
BORDER
<IFRAME BORDER="3"></IFRAME>
设定围绕图文框的边缘宽度
FRAMEBODER
<IFRAME FRAMEBODER="0"></IFRAME>
设置边框是不否为3维（0=否，1=是）

HEIGHT,WIDTH
<IFRAME HEIGHT="31" WIDTH="88"></IFRAME>
设质边框的宽度和高度

SCROLLING
<IFRAME SCROLLING="NO"></IFRAME>
是否有滚动条（YES,NO,AUTO)

SRC
<IFRAME src="/GIRL.GIF"></IFRAME>
指定IFRAME调用的文件或图片(HTML,HTM,GIF,JPEG,JPG,PNG,TXT,*.*)
-------------------------------------------------------------

“画中画”效果--谈IFRAME标签的使用

纵观时下网站，本来网速就有些慢，可是几乎每页都要放什么Banner，栏目图片，版权等一大堆雷同的东西，当然，出于网站风格统一、广告效应的需要，本无可厚非，可毕竟让用户的钱包为这些“点缀“的东西”日益消得钱憔悴”了，有没有办法，让这些雷同的东西一次下载后就不用再下载，而只下载那些内容有变化区域的网页内容呢？
答案很肯定：应用Iframe标记！

一、Iframe标记的使用

提起Iframe，可能你早已将之扔到“被遗忘的角落”了，不过，说起其兄弟Frame就不会陌生了。Frame标记即帧标记，我们所说的多帧结构就是在一个浏览器窗口中显示多个HTML文件。现在，我们遇到一种很现实的情况：如有一个教程，是一节一节地上，每页末尾做一个“上一节“、“下一节“的链接，除了每节教程内容不同之外，页面其它部分内容都是相同的，如果一页一页地做笨页面，这似乎太让人厌烦了，这时突发奇想，如果有一种方法让页面其它地方不变，只将教程做成一页一页的内容页，不含其它内容，在点击上下翻页链接时，只改变教程内容部分，其它保持不变，这样，一是省时，另则以后如教程有个三长两短的变动，也很方便，不致于牵一发而动全军了;更重要的是将那些广告Banner、栏目列表、导航等几乎每页的都有的东西只下载一次后就不再下载了。 Iframe标记，又叫浮动帧标记，你可以用它将一个HTML文档嵌入在一个HTML中显示。它不同于Frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件相互独立显示，而是可以直接嵌入在一个HTML文件中，与这个HTML文件内容相互融合，成为一个整体，另外，还可以多次在一个页面内显示同一内容，而不必重复写内容，一个形象的比喻即“画中画“电视。

现在我们谈一下Iframe标记的使用。

Iframe标记的使用格式是:

<Iframe src="/URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>
src：文件的路径，既可是HTML文件，也可以是文本、ASP等；
width、height："画中画"区域的宽与高；
scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示;
FrameBorder：区域边框的宽度，为了让“画中画“与邻近的内容相融合，常设置为0。

比如:

二、父窗体与浮动帧之间的相互控制在脚本语言与对象层次中，包含Iframe的窗口我们称之为父窗体，而浮动帧则称为子窗体，弄清这两者的关系很重要，因为要在父窗体中访问子窗体或相反都必须清楚对象层次，才能通过程序来访问并控制窗体。

1、在父窗体中访问并控制子窗体中的对象

在父窗体中，Iframe即子窗体是document对象的一个子对象，可以直接在脚本中访问子窗体中的对象。

现在就有一个问题，即，我们怎样来控制这个Iframe，这里需要讲一下Iframe对象。当我们给这个标记设置了ID 属性后，就可通过文档对象模型DOM对Iframe所含的HTML进行一系列控制。

比如在example.htm里嵌入test.htm文件，并控制test.htm里一些标记对象：
<Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe>
test.htm文件代码为:
<html>
<body>
<h1 id="myH1">hello,my boy</h1>
</body>
</html>
如我们要改变ID号为myH1的H1标记里的文字为hello,my dear，则可用:
document.myH1.innerText="hello,my dear"(其中，document可省)
在example.htm文件中，Iframe标记对象所指的子窗体与一般的DHTML对象模型一致，对对象访问控制方式一样，就不再赘述。

2、在子窗体中访问并控制父窗体中对象

在子窗体中我们可以通过其parent即父（双亲）对象来访问父窗口中的对象。
如example.htm：
<html>
<body onclick="alert(tt.myH1.innerHTML)">
<Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe>
<h1 id="myH2">hello,my wife</h1>
</body>
</html>
如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend"，我们就可以这样写：
parent.myH2.innerText="hello,my friend"
这里parent对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。

Iframe虽然内嵌在另一个HTML文件中，但它保持相对的独立，是一个“独立王国“哟，在单一HTML中的特性同样适用于浮动帧中。

试想一下，通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或函数，减省了多少繁琐的手工劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需修改一个父窗体的版式即可了。

有一点要注意，Nestscape浏览器不支持Iframe标记，但在时下IE的天下，这似乎也无大碍，广泛采用Iframe标记，既为自己(网站)着了想，又为网友节省了网费，何乐而不为？

例子：
<iframe src="页面" width="宽度" height="高度" align="排列可以是left或right,center" scrolling="是否有滚动条可以填no或yes" ></iframe>

<IFRAME frameBorder=0 frameSpacing=0 height=25 marginHeight=0 marginWidth=0 scrolling=no name=main src="/bgm/bgm.html" width=300></IFRAME>
2:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
用了iframe后发现滚动条不漂亮想用2个图片来代替↑↓

应该怎么实现呢？
回答：
用下列代码替换网页的<title>..</title>
<SCRIPT LANGUAGE="j***ascript">
function scroll(n)
{temp=n;
Out1.scrollTop=Out1.scrollTop temp;
if (temp==0) return;
setTimeout("scroll(temp)",80);
}
</SCRIPT>
<TABLE WIDTH="330">
<TR>
<TD WIDTH="304" VALIGN="TOP" ROWSPAN="2" >
<DIV ID=Out1 STYLE="100%; height:100;overflow: hidden ;border-style:dashed;border- 1px,1px,1px,1px;">
文字<BR> 文字<BR>
文字<BR>
文字<BR>
文字
<BR>
<BR>
</DIV>
</TD>
<TD WIDTH="14" VALIGN="TOP"><IMG SRC="photo/up0605.gif" WIDTH="14" HEIGHT="20" onmouseover="scroll(-1)" onmouseout="scroll(0)" onmousedown="scroll(-3)" BORDER="0" ALT="按下鼠标速度会更快！"></TD>
</TR>
<TR>
<TD WIDTH="14" VALIGN="BOTTOM"><IMG SRC="photo/down0605.gif" onmouseover="scroll(1)" onmouseout="scroll(0)" onmousedown="scroll(3)" BORDER="0" WIDTH="15" HEIGHT="21" ALT="按下鼠标速度会更快！"></TD>
</TR>
</TABLE>
内框架Iframe的使用

使用Iframe可以在一人表格内调用一个外部文件，是非常有用的。本网站在很多页面上都使用了iframe效果。

现在我们学一下Iframe标记的使用。

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。
name:框架的名字，用来进行识别。

比如:

当你想用父框架控制内部框架时，可以使用： target="框架的名字"来控制。

设置边框是不否为3维（0=否，1=是）

HEIGHT,WIDTH
<IFRAME HEIGHT="31" WIDTH="88"></IFRAME>
设质边框的宽度和高度

SCROLLING
<IFRAME SCROLLING="NO"></IFRAME>
是否有滚动条（YES,NO,AUTO)

SRC
<IFRAME src="/GIRL.GIF"></IFRAME>
指定IFRAME调用的文件或图片(HTML,HTM,GIF,JPEG,JPG,PNG,TXT,*.*)

=============================透明背景iframe===============
在嵌入iframe的页面中:

程序代码
<iframe src="/abc.htm" name="iframe" width="540" height="400" scrolling="Auto" frameborder="0" id="iframe" style="border:0px" allowtransparency="true"></iframe>

在该iframe被嵌入的页面中:

程序代码
<body STYLE="background-color: transparent">

===============iframe任何浏览器下自动伸缩=======
<iframe marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" id="frametb" scrolling="no" src="frame.htm" onload="style.width=this.contentWindow.document.all.formfra.offsetWidth;style.height=this.contentWindow.document.all.formfra.offsetHeight"></iframe>

frame.htm

=====================

<html>
<body leftmargin="0" topmargin="0">
<table id=formfra width=200 border=0 bgcolor=green>
<tr><td>
胡东平在线空间
<p/>
sfsfere
</td></tr>
</table>
</body>
</html>

执行mainframe.htm就可以看到效果了。
套用修改的时候要注意mainframe.htm和frame.htm里面定义表格的ID，然后记得在frame语句中修改相对应的调用文件名称和路径，并且注意下面这句：

=============================

onload="style.width=this.contentWindow.document.all.formfra.offsetWidth;style.height=this.contentWindow.document.all.formfra.offsetHeight"

=================================
做相应修改
=========================