内联框架

内联框架又叫浮动窗口

Here is a Floating Frame

</iframe>

内联框架

#=初始页面的 URL

##=窗口标识(Frame Name)(之后可对此标识进行各窗口间相互操作)

可以实现在同个页面中相同的位置显示不同的内容。这处方式是最早的一个近似于选项卡的表示方式；

iframe只显示网页一部分的代码

有时需要在一个网页里用框架<iframe>来调用另一个网页，多数情况下是全部显示，只要使用下面的代码就可以了：

url是要<iframe>的网页地址。

但如果希望要<iframe>的网页只显示一部分呢，尤其是网页中某个局部呢？

那就可以用下面的代码实现：

<tr>

<td>

</td>

</tr>

</table>

红色的代码是布局的关键，margin-top: -109表示顶部缩进109px，margin-left: -109表示左边缩进109px。至于右边和底部缩进，很简单，修改<iframe>的宽度和高度就可以了

说明细节：

iframe 标签 -- HTML内联框架

iframe标签是成对出现的,以<iframe>开始,</iframe>结束

iframe标签内的内容可以做为浏览器不支持iframe标签时显示

引用网址:http://www.dreamdu.com/xhtml/tag_iframe

属性

Common -- 一般属性

name -- 定义了内容页名称,此名称在框架页内链接时使用到

src -- 定义了内容页URL(同frame标签)

frameborder -- 定义了内容页的边框,取值为(1|0),缺省值为1

1 -- 在每个页面之间都显示边框

0 -- 不显示边框

height -- 框架的高度,取值像素或百分比

width -- 框架的宽度,取值像素或百分比

marginwidth -- 定义了框架中HTML文件显示的左右边界的宽度,取值为px,缺省值由浏览器决定

marginheight -- 定义了框架中HTML文件显示的上下边界的宽度,取值为px,缺省值由浏览器决定

scrolling -- 定义是否有滚动条,取值为(yes|no|auto),缺省值为auto

yes -- 显示滚动条

no -- 不显示滚动条

auto -- 当需要时再显示滚动条

align -- 垂直或水平对齐方式 )

longdesc -- 定义框架页的说明

示例

<iframesrc="http://www.xiaka.com/xhtml/" width="200"height="500">

使用了框架技术，但是您的浏览器不支持框架，请升级您的浏览器以便正常访问梦之都。

</iframe>

使用像素定义iframe框架大小

<iframesrc="http://www.xiaka.com/css/" width="20%" height="50%">

使用了框架技术，但是您的浏览器不支持框架，请升级您的浏览器以便正常访问梦之都。

</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="http://www.digidc.cn";width="250"height="200"scrolling="no"frameborder="0">

</iframe>

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

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

在父窗体中，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>

htm文件代码为:

<html>

<body>

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

C</body>

</html>

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

document.myH1.innerText="hello,mydear"(其中，document可省)

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

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

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

如example.htm：

<html>

content！

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

</body>

</html>

例子：

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

应该怎么实现呢？

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

<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">

文字<BR>文字<BR>

文字<BR>

文字 )

<BR>

</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>