Frame的应用

最新推荐文章于 2021-05-12 16:04:28 发布

g770728y

最新推荐文章于 2021-05-12 16:04:28 发布

阅读量1.2k

点赞数

分类专栏： J2EE 文章标签： javascript 框架脚本 html iframe function

本文链接：https://blog.csdn.net/g770728y/article/details/922350

版权

J2EE 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Frame的应用

框架相当于<body>，所以一个存在框架的html文件是不存在body的。

框架的作用就是划分屏幕，使界面尽可能少地实现刷新。最基本的应用就是菜单—内容界面。

1、框架的创建

</frameSet>

注：1）框架可以嵌套；2）框架划分可采用百分之、比例、像素为单位。Cols=”*,3*”就是把屏幕划分成四等分。

2、框架的格式

框架分割处有一条线？<frameSet frameborder=0>消除之（或<frame frameBorder=0）。

不对呀，颜色还是有问题？<frameSet frameborder=0 frameSpacing=0>

不想让用户调节调架大小？noResize就行了。

想让框架分割线具有颜色？borderColor就行了。

想要卷滚条？scrolling=yes/no/auto。

3、如何从一个框架修改另一框架？

很简单，例如<a href=”b.htm” target=1>XXX</a>就是在框架1中显示b.htm的内容。

当然也，也可以直接调用：如在javaScript中调用：frameset_id.1.location.href=”b.htm”。

以下是四种比较特殊的方法：

<a href=url target=_blank> 新窗口中打开，相当于window.open；

<a href=url target=_self> 本窗口打开，相当于window.location.href；

<a href=url target=_parent> 父窗口打开，相当于parent.location.href；

<a href=url target=_top> 整个浏览器窗口打开。

4、浮动窗口iframe

同frame差不多用法。

例如：

＜IFRAME name="floater" src="start.htm" width=150 height=200 hspace=10 align=left＞

slafjsalgjakg;al

</iframe>

可以试试。

5、编程操作

frame既可以通过名称来调用，也可以通过索引号来调用。如：

下面举例说明，假设一个FRAMESET包含3个同样的FRAME，都位于窗口下部：

＜FRAMESET rows="60%,40%"＞

＜FRAME name="link" src="link.htm"＞

＜FRAMESET cols="*,*,*"＞

＜FRAME name="blank1" src="blank.htm"＞

＜FRAME name="blank2" src="blank.htm"＞

＜FRAME name="blank3" src="blank.htm"＞

＜/FRAMESET＞

　　第一个FRAME中的文档叫做link.htm，使用点击其中的单一链接就可以修改其他三个FRAME中的内容。实现代码如下:

＜a href="javascript:navAll()"＞修改下面3个FRAME的内容＜/a＞

＜SCRIPT language="javascript"＞＜!--

function navAll() {

parent.FRAMEs[1].location.href="red.htm";

parent.FRAMEs[2].location.href="blue.htm";

parent.FRAMEs[3].location.href="white.htm"; }

// --＞＜/SCRIPT＞

以下来自某个网站。

用脚本控制动态FRAME

　　如果FRAME中变化的内容不多，就可以考虑使用脚本程序动态生成其内容。这样就不用再创建单独的小HTML页面，无需从服务器上下载。创建内容的方法与在任何窗口中书写内容一样，都是通过document对象。

　　举个例子说明一下。假设要在一个FRAME内显示小组成员的相片，并在其下的一个小FRAME内显示该成员的名字等信息。首先建立信息数组：

empID = new Array();

empID[0] = 'Dana Corolla, CEO';

empID[1] = 'Arturo Montero, senior editor';

empID[2] = 'Percy Tercel, head designer';

empID[3] = 'Angus Coupedeville, astrologer';

　　然后，建立小组成员照片的图形地图，将每个＜AREA＞链接到函数showMe(n)，由它负责根据索引数据创建信息：

part1 = '＜HTML＞＜HEAD＞＜/HEAD＞';

part1+= '＜BODY bgcolor=#ffffff＞＜DIV align=center＞';

part2 = '＜/DIV＞＜/BODY＞＜/HTML＞';

function showMe(n) {

parent.FRAMEs[1].document.open();

parent.FRAMEs[1].document.write(part1);

parent.FRAMEs[1].document.write(empID[n]);

parent.FRAMEs[1].document.writeln(part2);

parent.FRAMEs[1].close();

}

　　FRAME间的脚本控制

　　使用javascript，我们既可以从创建窗口的页面访问那个窗口，也可以从这个窗口创建的窗口访问它。另一方面，FRAMESET中的文档（包括FRAMESET本身）总是可以访问和操纵其中每个的javascript函数和变量。比如说，第三个FRAME中有函数sayGobble(vol)，那么在其他FRAME中就可以使用parent.FRAMEs[2].sayGobble(vol)来引用它。同样，FRAMESET页面中的变量myName可以被任何FRAME以parent.myName="Imelda"的命令进行设置。

　　不管在其他FRAME中的内容如何，在静态FRAME或者FRAMESET中的函数和变量始终保持可用。这个特征非常有价值，不仅可以将通用函数保存在其中从而压缩代码，而且，还可以实现页面间转换时的状态保持。

　　下面的FRAMESET页面只有一个FRAME叫做query.htm，并且定义了一个javascript变量myWord：

＜HTML＞＜HEAD＞

＜TITLE＞Passing data＜/TITLE＞

＜SCRIPT LANGUAGE="javascript"＞＜!--

myWord="";

//--＞＜/SCRIPT＞

＜/HEAD＞

＜FRAMESET rows="*,1" FRAMEBORDER=no＞

＜FRAME name="active" src="query.htm"＞

＜FRAME name="dummy"＞

＜/FRAMESET＞

＜/HTML＞

　　页面query.htm有一个文本输入框以及一个到result.htm的链接，链接的onClick事件将设置FRAMESET页面的myWord变量为文本输入框的内容。代码如下：

＜HTML＞＜HEAD＞＜/HEAD＞

＜BODY＞

＜FORM name="myForm"＞

＜INPUT type=text size=12 name="myText"＞

＜P＞

＜A onClick="parent.myWord=myText.value"

href="result.htm"＞See it in yellow on blue!＜/A＞

＜/FORM＞

＜/BODY＞＜/HTML＞

　　页面result.htm取回并打印出myWord的数值，代码是：

＜HTML＞

＜HEAD＞＜/HEAD＞

＜BODY bgcolor=#0000cc vlink=#99ffff＞

＜FONT size=+3 color=#ffff00＞

＜SCRIPT language="javascript"＞＜!--

document.write(parent.myWord);

//--＞＜/SCRIPT＞

＜/FONT＞＜P＞

＜A href="query.htm"＞Do it again＜/a＞

＜/BODY＞＜/HTML＞

　　这个例子很有实用价值。比如说，你可以设定访问者按一定的次序打开页面，收集用户信息，最后定制出用户特制的显示内容。

　　谈到状态维护功能，这个方法不会比使用cookie或CGI更好，因为当FRAMESET重载或者退出时，变量值就丢失了。但是，它不要求服务器端响应，也不存在安全问题，因此还是可以小试一把的。

　　用脚本控制浮动FRAME

　　用脚本控制普通FRAME与浮动FRAME的方法基本相同，唯一的差别是浮动FRAME按＜IFRAME＞出现的顺序定义索引位置。如果FRAMEs.length不为0，就表示可以安全地处理浮动FRAME。比如说，在下面的代码中，如果存在叫做floater的浮动FRAME，链接就指向它；否则就指向"_top"：

＜IFRAME name="floater" src="trog.htm" width=200 height=200＞＜/IFRAME＞

＜A href="grot.html" target="floater" onClick="if (!self.FRAMEs.length)

this.target='_top'"＞See grot.htm＜/A＞

　　带有浮动FRAME的Web页面是FRAME文档的parent窗口，因此，多个浮动FRAME仍然可以通过parent.FRAME数组去访问每一个FRAME。

　　预防脚本编程错误

　　尽管FRAME是HTML的一个稳定规范说明，但DOM模型只把它们当做HTML元素而不是窗口，因此围绕FRAME的脚本编程并不是能很周全地定义。这个不足导致了当装载FRAME时会发生一些脚本执行方面的冲突。

　　立即修改FRAME内容的脚本经常会产生错误。原因在于：浏览器通常是先执行脚本命令，然后在按照src所示装入页面内容。

　　解决方法很直接，就是判断FRAME内容是否装载完毕。有一个好的处理技巧是以HTML页面开始所有的FRAME，由它象主FRAMESET报告装载请看。比如说，有一个FRAMESET页面，要等装载完所有的FRAME后才能执行函数goToIt()，那么就将下面的javascript程序段放进FRAMESET文档中：

countDown=FRAMEs.length;

function soundOff() {

countDown--;

if (countDown==0) {

goToIt();

}

　　然后，在每个FRAME页面的＜BODY＞标记中设置上onLoad="parent.soundOff()"。当FRAME页面装载并执行soundOFF()后，等到countDown 为0时，就表示FRAME完全装载完毕。

g770728y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Frame的应用

Frame的应用框架相当于，所以一个存在框架的html文件是不存在body的。框架的作用就是划分屏幕，使界面尽可能少地实现刷新。最基本的应用就是菜单—内容界面。1、框架的创建注：1）框架可以嵌套；2）框架划分可采用百分之、比例、像素为单位。Cols=”*,3*”就是把屏幕划分成四等分。2、框架的格式框架
复制链接

扫一扫