HTML iframe 用法总结收藏.docx

资源描述

HTML iframe 用法总结收藏.docx

《HTML iframe 用法总结收藏.docx》由会员分享，可在线阅读，更多相关《HTML iframe 用法总结收藏.docx（23页珍藏版）》请在冰豆网上搜索。

HTML iframe 用法总结收藏.docx

HTMLiframe用法总结收藏

　　iframe是框架的一种形式，也比较常用到。

　　Iframe用法精析

　　<iframeframeborder=0width=170height=100marginheight=0marginwidth=0scrolling=nosrc="move-ad.htm"></iframe>

　　<IFRAME>用于设置文本或图形的浮动图文框或容器。

　　BORDER

　　<IFRAMEBORDER="3"></IFRAME>

　　设定围绕图文框的边缘宽度

　　FRAMEBODER

　　<IFRAMEFRAMEBODER="0"></IFRAME>

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

　　HEIGHT,WIDTH

　　<IFRAMEHEIGHT="31"WIDTH="88"></IFRAME>

　　设质边框的宽度和高度

　　SCROLLING

　　<IFRAMESCROLLING="NO"></IFRAME>

　　是否有滚动条（YES,NO,AUTO）

　　SRC

　　<IFRAMESRC="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标记的使用格式是:

　　代码如下:

　　<Iframesrc="URL"width="x"height="x"scrolling="[OPTION]"frameborder="x"></iframe>

　　src：

文件的路径，既可是HTML文件，也可以是文本、ASP等；

　　width、height：

"画中画"区域的宽与高；

　　scrolling:

当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：

则自动出现滚动条；如为Yes，则显示;

　　FrameBorder：

区域边框的宽度，为了让“画中画“与邻近的内容相融合，常设置为0。

　　比如:

　　代码如下:

　　<Iframesrc="";;width="250"height="200"scrolling="no"frameborder="0"></iframe>

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

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

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

　　现在就有一个问题，即，我们怎样来控制这个Iframe，这里需要讲一下Iframe对象。

当我们给这个标记设置了ID属性后，就可通过文档对象模型DOM对Iframe所含的HTML进行一系列控制。

　　比如在example.htm里嵌入test.htm文件，并控制test.htm里一些标记对象：

　　代码如下:

　　<Iframesrc="test.htm"id="test"width="250"height="200"scrolling="no"frameborder="0"></iframe>

　　test.htm文件代码为:

　　<html>

　　<body>

　　<h1id="myH1">hello,myboy</h1>

　　</body>

　　</html>

　　如我们要改变ID号为myH1的H1标记里的文字为hello,mydear，则可用:

　　document.myH1.innerText="hello,mydear"（其中，document可省）

　　在example.htm文件中，Iframe标记对象所指的子窗体与一般的DHTML对象模型一致，对对象访问控制方式一样，就不再赘述。

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

　　在子窗体中我们可以通过其parent即父（双亲）对象来访问父窗口中的对象。

　　如example.htm：

　　代码如下:

　　<html>

　　<bodyonclick="alert（tt.myH1.innerHTML）">

　　<Iframename="tt"src="frame1.htm"width="250"height="200"scrolling="no"frameborder="0"></iframe>

　　<h1id="myH2">hello,mywife</h1>

　　</body>

　　</html>

　　如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,myfriend"，我们就可以这样写：

　　parent.myH2.innerText="hello,myfriend"

　　这里parent对象就代表当前窗体（example.htm所在窗体），要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。

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

　　试想一下，通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或函数，减省了多少繁琐的手工劳动！

另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需修改一个父窗体的版式即可了。

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

　　例子

　　代码如下:

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

　　<IFRAMEframeBorder=0frameSpacing=0height=25marginHeight=0marginWidth=0scrolling=noname=mainsrc="bgm/bgm.html"width=300></IFRAME>

　　用了iframe后发现滚动条不漂亮想用2个图片来代替↑↓

　　应该怎么实现呢？

　　回答：

　　用下列代码替换网页的

　　代码如下:

　　<SCRIPTLANGUAGE="javascript">

　　functionscroll（n）

　　{temp=n;

　　Out1.scrollTop=Out1.scrollTop+temp;

　　if（temp==0）return;

　　setTimeout（"scroll（temp）",80）;

　　}

　　</SCRIPT>

　　<TABLEWIDTH="330">

　　<TR>

　　<TDWIDTH="304"VALIGN="TOP"ROWSPAN="2">

　　<DIVID=Out1STYLE="width:

100%;height:

100;overflow:

hidden;border-style:

dashed;border-width:

1px,1px,1px,1px;">

　　文字

　　</DIV>

　　</TD>

　　<TDWIDTH="14"VALIGN="TOP"><IMGSRC="photo/up0605.gif"WIDTH="14"HEIGHT="20"onmouseover="scroll（-1）"onmouseout="scroll（0）"onmousedown="scroll（-3）"BORDER="0"ALT="按下鼠标速度会更快！

"></TD>

　　</TR>

　　<TR>

　　<TDWIDTH="14"VALIGN="BOTTOM"><IMGSRC="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标记的使用格式是:

　　代码如下:

　　<Iframesrc="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:

框架的名字，用来进行识别。

　　比如:

　　<Iframesrc=""width="250"height="200"scrolling="Auto"frameborder="0"name="main"></iframe>

　　当你想用父框架控制内部框架时，可以使用：

target="框架的名字"来控制。

　　IFrame也可以编辑文字

　　有没有想过除了表单（<form>）之外还有其它的网页元素可以编辑文字呢？

只要使用IFrame的隐藏的一个属性就可以使IFrame成为一个文本编辑器。

　　<html>

　　<bodyonload="editer.document.designMode='On'">

　　<IFrameID="editer"></IFrame>

　　</body>

　　</html>

　　其中designMode属性表示IFrame的设计模式的状态（开/关），还在犹豫什么呢，快试试吧！

　　只要巧妙的利用这一特性就可以制作很多意想不到的效果。

如果下面我们来做一个图片编辑器。

　　<html>

　　<bodyonload="imgEditer.document.designMode='On';imgEditer.document.write（'<imgsrc=图片.gif>'）">

　　<IFrameid="imgEditer"></IFrame>

　　</body>

　　</html>

　　下面使更多的补充：

　　<iframe>是框架的一种形式，也比较常用到。

　　例子1。

　　<iframewidth=420height=330frameborder=0scrolling=autosrc=URL></iframe>

　　不用多说了。

　　width插入页的宽；height插入页的高；scrolling是否显示页面滚动条（可选的参数为auto、yes、no，如果省略这个参数，则默认为auto）；frameborder边框大小；

　　注意：

URL建议用绝对路径

　　传说中百DU用：

<iframewidth=0height=0frameborder=0scrolling=autosrc=http:

//WWW></iframe>

　　黑了88*8。

。

　　例子2。

　　如果一个页面里面有框架。

。

随便点页面里的连接，要求在这个<iframe>里打开。

在iframe中加入name=**（**自己设定）

　　<iframename=**></iframe>

　　然后在修改默认打开模式，：

网页HEAD中加上<ahref=URLtarget=**>或部分连接的目标框架设为（**）

　　例子3。

　　要插入一个页面。

要求只拿中间一部分。

其他的都不要。

，。

。

　　代码：

　　<iframename=123align=middlemarginwidth=0marginheight=0vspace=-170hspace=0src="frameborder=noscrolling=nowidth=776height=2500></iframe>

　　控制插入页被框架覆盖的深度marginwidth=0marginheight=0；控制框架覆盖上部分的深度vspace=-170

　　scrolling滚动条要否（auto、yes、no）frameborder框架的边框大小，width=776height=2500此框架的大小。

　　一、页面内加入iframe

　　<iframewidth=420height=330frameborder=0scrolling=autosrc=URL></iframe>，

　　scrolling表示是否显示页面滚动条，可选的参数为auto、yes、no，如果省略这个参数，则默认为auto。

　　二、超链接指向这个嵌入的网页，只要给这个iframe命名就可以了。

方法是<iframename=**>，例如我命名为aa，写入这句HTML语言<iframewidth=420height=330name=aaframeborder=0src=></iframe>，然后，网页上的超链接语句应该写为：

<ahref=URLtarget=aa>

　　三、如果把frameborder设为1，效果就像文本框一样

　　透明的IFRAME的用法

　　必需IE5.5以上版本才支持

　　在transparentBody.htm文件的<body>标签中，我已经加入了style="background-color=transparent"通过以下四种IFRAME的写法我想大概你对iframe背景透明效果的实现方法应该会有个清晰的了解：

　　<IFRAMEID="Frame1"SRC="transparentBody.htm"allowTransparency="true"></IFRAME>

　　<IFRAMEID="Frame2"SRC="transparentBody.htm"allowTransparency="true"STYLE="background-color:

green"></IFRAME>

　　<IFRAMEID="Frame3"SRC="transparentBody.htm"></IFRAME>

　　<IFRAMEID="Frame4"SRC="transparentBody.htm"STYLE="background-color:

green"></IFRAME>

　　重点1：

利用javascript指定iframe的src并重新加载该iframe（见本文最下面我的项目）

　　难点1：

设置iframe的背景色

　　a.htm

　　functionsetBG（）{

　　varstrColor=document.bgColor;

　　frm.document.bgColor=strColor;

　　}

　　</script>

　　<bodystyle='background-color:

red'onload='setBG（）'>

　　<iframesrc='about:

blank'name=frm></iframe>

　　难点2：

　　窗口与浮动帧之间的相互控制

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

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

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

　　现在就有一个问题，即，我们怎样来控制这个Iframe，这里需要讲一下Iframe对象。

当我们给这个标记设置了ID属性后，就可通过文档对象模型DOM对Iframe所含的HTML进行一系列控制。

　　比如在example.htm里嵌入test.htm文件，并控制test.htm里一些标记对象：

　　<Iframesrc="test.htm"id="test"width="250"height="200"scrolling="no"frameborder="0"></iframe>

　　test.htm文件代码为:

　　<html>

　　<body>

　　<h1id="myH1">hello,myboy</h1>

　　</body>

　　</html>

　　如我们要改变ID号为myH1的H1标记里的文字为hello,mydear，则可用:

　　document.myH1.innerText="hello,mydear"（其中，document可省）

　　在example.htm文件中，Iframe标记对象所指的子窗体与一般的DHTML对象模型一致，对对象访问控制方式一样，就不再赘述。

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

　　在子窗体中我们可以通过其parent即父（双亲）对象来访问父窗口中的对象。

　　如example.htm：

　　<html>

　　<bodyonclick="alert（tt.myH1.innerHTML）">

　　<Iframename="tt"src="frame1.htm"width="250"height="200"scrolling="no"frameborder="0"></iframe>

　　<h1id="myH2">hello,mywife</h1>

　　</body>

　　</html>

　　如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,myfriend"，我们就可以这样写：

　　parent.myH2.innerText="hello,myfriend"

　　或者parent.document.getElementById（"myH2"）.innerText="hello,myfriend"

　　这里parent对象就代表当前窗体（example.htm所在窗体），要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。

frame的一个子元素访问frame的另一个子元素

　　例如：

框架文件frame.html中嵌入了另外两个html文件

　　<divstyleClass="basewnd">

--搜索-->

　　<divid="sea

展开阅读全文