窗体Iframe用法

iframe用法时间:2021-02-26 阅读:()

Iframe用法精析

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

BORDER

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

FRAMEBODER

设置边框是不否为3维0=否 1=是

HEIGHT,WIDTH

设质边框的宽度和高度

SCROLLING

<IFRAMESCROLLING="NO"></IFRAME>

是否有滚动条YES,NO,AUTO)

SRC

<IFRAMESRC="GIRL.GIF"></IFRAME>

指定IFRAME调用的文件或图片(HTML,HTM,GIF,JPEG,JPG,PNG,TXT,*.*)

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

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

答案很肯定应用Ifra me标记

一、 Iframe标记的使用

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

Iframe标记的使用格式是:

复制代码代码如下:

<Iframe src="URL"width="x" height="x" scrol l ing="[OPTION]" frameborder="x"></iframe>src文件的路径既可是HTML文件也可以是文本、 ASP等width、 height "画中画"区域的宽与高scrol l ing:当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" scrol l ing="no"frameborder="0"></iframe>test.htm文件代码为:

<html>

<body>

</body>

</html>

如我们要改变ID号为myH1的H1标记里的文字为hel lo,mydear则可用:document.myH1. innerText="hel lo,mydear"(其中 document可省)

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

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

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

如example.htm

复制代码代码如下:

<html>

<h1 id="myH2">hel lo,mywife</h1>

</body>

</html>

如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hel lo,my friend"我们就可以这样写parent.myH2. innerText="hel lo,myfriend"

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

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

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

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

复制代码代码如下:

2: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :

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

应该怎么实现呢

回答

用下列代码替换网页的

复制代码代码如下:

<SCRIPT LANGUAGE="javascript">function scrol l(n)

{temp=n;

Out1.scrol lTop=Out1.scrol lTop+temp;if(temp==0) return;setTimeout("scrol l (temp)",80);

}

</SCRI PT>

<TR>

文字

</DIV>

</TD>

</TR>

<TR>

</TR>

</TABLE>

内框架Iframe的使用

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

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

Iframe标记的使用格式是:

复制代码代码如下:

<Iframe src="URL" width="x" height="x" scrol l ing="[OPTION]" frameborder="x"name="main"></iframe>src文件的路径既可是HTML文件也可以是文本、 ASP等

width、 height "内部框架"区域的宽与高scrol l ing:当SRC的指定的HTML文件在指定的区域不显不完时滚动选项如果设置为NO则不出现滚动条如为Auto则自动出现滚动条如为Yes则显示;

FrameBorder区域边框的宽度为了让“内部框架“与邻近的内容相融合常设置为0。name:框架的名字用来进行识别。

比如:

当你想用父框架控制内部框架时可以使用 ta rget="框架的名字"来控制。

IFrame也可以编辑文字

有没有想过除了表单(<form>)之外还有其它的网页元素可以编辑文字呢只要使用IFrame的隐藏的一个属性就可以使IFrame成为一个文本编辑器。

<html>

</body>

</html>

其中designMode属性表示IFrame的设计模式的状态开/关还在犹豫什么呢快试试吧只要巧妙的利用这一特性就可以制作很多意想不到的效果。如果下面我们来做一个图片编辑器。

<html>

<IFrameid="imgEditer"></IFrame>

</body>

</html>

下面使更多的补充

例子1。

不用多说了。width插入页的宽 height插入页的高 scrol l ing是否显示页面滚动条可选的参数为auto、 yes、 no如果省略这个参数则默认为auto frameborder边框大小

注意 URL建议用绝对路径

传说中百 DU 用 <iframe width=0 height=0 frameborder=0 scrol l ing=autosrc=http://WWW.jb51.net></iframe>

黑了88*8。。。

例子2。

如果一个页面里面有框架。。随便点页面里的连接要求在这个<iframe>里打开。在iframe中加入name=** **自己设定

然后在修改默认打开模式 网页HEAD中加上<a href=URLtarget=**>或部分连接的目标框架设为**

例子3。

要插入一个页面。要求只拿中间一部分。其他的都不要。  。。

代码

控制插入页被框架覆盖的深度marginwidth=0 marginheight=0控制框架覆盖上部分的深度vspace=-170scrol l ing滚动条要否auto、 yes、 no frameborder框架的边框大小 width=776height=2500此框架的大小。

一、页面内加入iframe

二、超链接指向这个嵌入的网页只要给这个iframe命名就可以了。方法是<iframename=**>例如我命名为aa写入这句HTML语言<iframe width=420 height=330 name=aaframeborder=0 src=http://www.cctv.com></iframe>然后 网页上的超链接语句应该写为<a href=URLtarget=aa>

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

透明的IFRAME的用法

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

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

重点1利用javascript指定iframe的src并重新加载该iframe(见本文最下面我的项目)难点1设置iframe的背景色a.htm

}

</script>

难点2

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

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

通过程序来访问并控制窗体。

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

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

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

<Iframe src="test.htm" id="test" width="250" height="200" scrol l ing="no"frameborder="0"></iframe>test.htm文件代码为:

<html>

<body>

</body>

</html>

如我们要改变ID号为myH1的H1标记里的文字为hel lo,mydear则可用:document.myH1. innerText="hel lo,mydear"(其中 document可省)

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

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

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

如example.htm

<html>

<h1 id="myH2">hel lo,mywife</h1>

</body>

</html>

如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hel lo,my friend"我们就可以这样写parent.myH2. innerText="hel lo,myfriend"

或者parent.document.getElementById("myH2"). innerText="hel lo,myfriend"

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

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

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

</div>

</div>

那么现在要在DirectoryTree.html文件中访问Search.html文件中的一个id为section的<font></font>标签的innerHTML属性则可以这样alert(parent.document.search.section. innerHTML),

其中search是“搜索” div的id或者alert(parent.document.getElementById("search").section. innerHTML),

或者也可以这样alert(parent.document.frames["frameSubl ist"].name)(这是直接访问iframe)

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

要注意的是 Nestscape6.0之前版本不支持Iframe标记。

例子

1: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :

2: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :

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

应该怎么实现呢

回答

用下列代码替换网页的<title>. .</title>

<SCRIPT LANGUAGE="javascript">function scrol l(n)

{temp=n;

Out1.scrol lTop=Out1.scrol lTop+temp;if(temp==0) return;setTimeout("scrol l (temp)",80);

}

</SCRI PT>

<TR>

文字<BR>文字<BR>

文字<BR>

文字

<BR>

</DIV>

</TD>

</TR>

<TR>

</TR>

</TABLE>

: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :: : : : : : : : : : : : : : : :

下面这段代码可以实现IFrame 自适应高度 即随着页面的长度 自动适应以免除页面和IFrame同时出现滚动条。

源代码如下

//** iframe自动适应页面**//

//输入你希望根据页面高度自动调整高度的iframe的名称的列表

//用逗号把每个iframe的ID分隔.例如: ["myframe1", "myframe2"] 可以只有一个窗体则不用逗号。

//定义iframe的IDvar iframeids=["test"]

//如果用户的浏览器不支持iframe是否将iframe隐藏yes表示隐藏 no表示不隐藏var iframehide="yes"function dyniframesize()

{var dyniframe=newArray()for (i=0; i<iframeids. length; i++)

{if(document.getElementById)

{

//自动调整iframe高度dyniframe[dyniframe. length]=document.getElementById(iframeids);if(dyniframe&&!window.opera)

{dyniframe.style.display="block"if (dyniframe.contentDocument&&dyniframe.contentDocument.body.offsetHeight) //如果用户