浮动帧在网页设计中的应用

最新推荐文章于 2022-08-09 10:40:39 发布

kele2005

最新推荐文章于 2022-08-09 10:40:39 发布

阅读量2.7k

点赞数

文章标签： html iframe 文档 javascript 框架 vbscript

本文链接：https://blog.csdn.net/kele2005/article/details/670728

版权

1. 帧结构的应用

在说明帧结构的应用之前先举个例子，比如说我们要做这样一些页面：有一个教程，是一节一节地上，每页末尾做一个“上一节“、“下一节“的链接，除了每节教程内容不同之外，页面其它部分内容都是相同的，如果按以往的方法，一页一页地做，不停的拷贝粘贴那些相同的东西，似乎太让人厌烦了，这时我们就可以用上帧结构。

帧结构标记包括 Frame 标记和 Iframe 标记。对于绝大部分网页设计人员来说，前者大家都知道，也都用过，就是我们平常所说的框架；后者即浮动帧，可能就有许多人很陌生，我们可以这样理解——框架中的框架。

我们通常所说的多帧结构就是在一个浏览器窗口中显示多个 HTML 文件。帧结构在网站设计中是非常有用的，它允许将屏幕分隔成多个独立的视窗，并把每一个视窗看成一个帧。例如，你有一个叫 top.htm 的页面，它包含到这个站点所有页面的链接。不论用户想要打开哪一页，通常都需要在 top 视图下，以便对站点进行操作。一种方法是通过在站点中对每一页的链接拷贝和粘贴来完成。但这样做既费时又费力，而且每当你增删或修改某个链接时，都会不可避免地将涉及到该链接的所有页面修改一下遍。如果这时使用帧结构，你可以在一个帧中显示 top.htm ，在另一个特别指定的帧中显示它所链接的页面，那么在修改时只需要修改 top.htm 文件中的链接即可。

2. 浮动帧的特征及用法

2.1 浮动帧的特征

浮动帧即 Iframe ，又叫浮动框架，相对于通常的框架来说，应用浮动帧主要有以下两大特征：

一是浮动帧的位置和大小可以随意调整，便于布局整个页面；

二是可以将一个 HTML 文档嵌入在另一个 HTML 中显示，而且嵌入的页面能与原来的页面内容相互融合成一个整体，看起来就像一个页面一样。

因此浮动帧不同于框架最大的特征即它所引用的 HTML 文件不是与另外的 HTML 文件相互独立显示，而是可以直接嵌入在一个 HTML 文件中，与这个 HTML 文件内容相互融合，成为一个整体。

2.2 浮动帧的属性

浮动帧的常用属性：

属性	释义
src	文件的路径，既可是 HTML 文件，也可以是文本、 ASP 等文档
width	浮动帧区域的宽度
height	浮动帧区域的高度
scrolling	当 SRC 的指定的文件在指定的区域显示不完全时，是否显示滚动条
FrameBorder	浮动帧区域边框的宽度 ( 为了让区域内的内容与周边的内容相融合，常设置为 0)
marginwidth	浮动帧区域的边距宽度
marginheight	浮动帧区域的边距高度

2.3 浮动帧的使用方法

浮动帧的使用格式是：

如： <Iframe src="http://www.yrec.cn/corpnews.asp" width="600" height="960" scrolling="no" frameborder="0" marginheight="0" marginwidth =”0”></iframe>

具体的效果可以参看www.yrec.cn和www.waterpostdoctor.cn等，都应用了浮动帧技术。

3. 父窗体与浮动帧之间的相互控制

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

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

在父窗体中，浮动帧（即子窗体）是 document 对象的一个子对象，可以直接在脚本中访问子窗体中的对象（每一个子对象都有一个 ID 属性， ID 的值由网页设计者自己指定）。

现在就有一个问题，即，我们怎样在父窗体中来控制这个浮动帧？答案很简单，我们只需要设置一下浮动帧的 ID 属性即可。当我们给这个标记设置了 ID 属性后，就可通过文档对象模型 DOM 对浮动帧所含的 HTML 进行一系列控制。

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

test.htm 文件代码为：

<html>

<body>

<h1 id="myText1">Welcome</h1>

</body>

</html>

如我们要改变 ID 号为 myText 的 H1 标记里的文字为 How are you ，则可用：

document. myText.innerText="How are you"( 其中， document 可省 )

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

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

在父窗体中我们可以通过子窗体的 ID 来访问控制子窗体的内容显示。那么在子窗体中能否访问控制父窗体呢？当然可以！其实很简单，和在父创体中访问子窗体的方法一样，只需通过“ Parent.Document ”再加上父窗体中的对象的 ID 就可以了，当然 Document 可以省略。

如 example.htm ：

<html>

<body>

</body>

</html>

如果要在 frametest.htm 中访问 ID 号为 myText2 中的标题文字并将之改为 "Welcome" ，我们就可以这样写： parent.myText2.innerText=" Welcome " 。这里 parent 对象就代表当前窗体 (example.htm 所在窗体 ) ，要在子窗体中访问父窗体中的对象，无一例外都通过 parent 对象来进行。

4. 浮动帧的应用

浮动帧的应用很广，比较突出有两点： 1 、解决表单元素与层之间的冲突； 2 、编写在线网页编辑器。在这里简单介绍一下在线网页编辑器的用法。

应用浮动帧编写一个在线编辑器，首先要具备两个条件：第一、熟悉 Html 文档结构，能熟练应用 Html 文档对象模型；其次还要具备一定的 JavaScript 或 VBScript 脚本语言基础。下面结合 JavaScript 介绍一下在线编辑器的用法，请看下边的代码：

<script language="JavaScript">

document.write ('<iframe src="aa.htm" name="frm1" id="frm1" width="100%" height="100%" align=center></iframe>')

frm1.document.designMode = "On";

</script>

在上边的这段短短数行的代码中，已经包含了实现在线编辑功能的关键语句，即：

frm1.document.designMode = "On";

这行代码。

“ designMode ”是 Html 文档的一个属性，他表示该文档的设计模式，“ on ”表示编辑模式。‘ frm1.document.designMode = "On"; ’ 表示名称为“ frm1 ”的浮动帧内包含的文档“ aa.htm ”可以在线编辑。如果将上边这段代码加入到某个 Html 文档（ index.htm ）中的适当地方，经过适当的修改之后，运行 index.htm 就可以看到，在线编辑功能实现了！！！

5 ．结束语

浮动帧虽然内嵌在另一个 HTML 文件中，但它保持相对的独立，就像一个“独立王国”。通过应用浮动帧，我们可将那些经常变化的内容以浮动帧来表示，不必重复写相同的内容，类似于程序设计中的过程或函数，不仅减省了许少繁琐的手工劳动，而且令你的网站更加便于维护！在线网页编辑器的功能使得你在编写网站的远程发布系统时，更加方便、实用。有一点要注意， Nestscape 浏览器不支持浮动帧，但在时下 IE 的天下，这似乎也无大碍，广泛采用浮动帧，既为自己 ( 网站 ) 着了想，又为用户节省了时间，何乐而不为？

参考资料：

《 DominoWeb 开发综述》第四章使用帧结构、大纲和其他设计元素