复杂的javascript窗口分帧解析

什么是窗口分帧？　　

　窗口分帧就是把一个浏览器文档窗口分隔成多个窗口,每个窗口都可以显示一个独立的网页文件，每个帧(即页面)都有自己的url。

帧窗口该如何创建？

　　帧通常是由<frameset>和<frame>标记创建的。但在HTML 4中，<iframe>标记也可以用来在文档中创建“内联帧”。就JavaScript来说，<iframe>创建的帧与<frameset>和<frame>创建的帧一样。

　　在HTML中用<frameset>（分割窗口标记）来分割窗口，<frameset>在多窗口页面中的地位就相当 于<body>在普通单窗口页面中的地位，在页面中用<frameset>……</frameset>标志页面主体 部分的起止位置。而且，<frameset>标记决定了怎样划分窗口，以及每个窗口的位置和大小。其基本语法结构如下：

<frameset cols=n rows=n frameborder=yes|no border=n bordercolor=#n framespacing=n></frameset>

　　cols和rows：是决定页面如何分割的两个参数。分割左右窗口用cols，各帧的左右宽度用占窗口宽度的百分比来表示。比 如：cols="30%,40%,*"就表示水平方向分割成三个窗口，各自所占总宽度的百分比依次是30%，40%和30%。其中"*"表示剩余部分，也 就是说"*"对应的小窗口宽度为剩余的宽度。分割上下窗口用rows，同样采用百分比的设定方法。

　　frameborder：是指定各分窗口是（ye）否（no）要加边框；如果加过框的话，则用 border参数指定边框的宽度，bordercolor指定边框的颜色。

　　framespacing：用于设定各分窗口之间的间隔大小，默认值是0。

　　用<frameset>标记把窗口分割好后，各窗口的属性是用HTML的<frame>标记来定义的，所以<frameset>标记中必须包含<frame>标记，用以定义各分窗口的属性。其语法如下：

<frame align=left|center|right|top|bottomv name=framename src＝url noresize scrolling＝yes|on|auto frameborder=yes|no bordercolor＝＃n marginheight=n marginwidth＝n></frame>

　　align：设定分窗口的位置是靠左（left）、靠右（right）、居中（center）、靠上（top）还是靠底（bottom）。

　　name：用于指定分窗口的名称，src则用于指定分窗口所对应的HTML页面地址。

　　noresize：是对用户来说的，当<frame>标记中包含此参数的时候，用户就不能用鼠标调整修改各分窗口的大小。

　　scrolling：设定分窗口是否要滚动条。scrolling=no时不要滚动条，scrolling＝yes时表示要滚动条，scrolling＝auoto时表示根据实际情况自动设置滚动条。

　　frameborder和bordercolor：是设定分窗口有无边框和边框颜色的。但对象只限于用<frame>标记的分窗口。

　　marginheight和marginwidth：分别用于设定分窗口的上下边缘和左右边缘的宽度。

　　例如：

<frameset cols="50%,*,25%">
 <frame src="http://www.baidu.com" noresize="noresize" />
 <frame src="http://www.baidu.com" />
 <frame src="http://www.baidu.com" />
</frameset>

JavaScript中帧窗口之间的关系？
　　一个窗口的任何帧可以通过top,frames和parent属性来引用其他帧。

　　任何窗口或帧中的JavaScript代码可以将自己的窗口和帧引用为 window 或 self。

　　每个窗口都有frames属性。这个属性引用一个Window对象的数组，其中每个元素代表的是这个窗口中包含的帧(如果一个窗口没有任何帧，那么frames[]数组就是空的，frames.length为0).这样，窗口就可以使用frames[0]来引用它的第一个帧,使用frames[1]来引用第二个帧，一次类推。

　　每个窗口还包含有一个parent属性，它引用包含这个窗口的Window对象。这样，窗口中的第一个帧就可以引用它的兄弟帧，即:

　parent.frames[1]

如果一个窗口是顶级窗口，而不是帧，那么parent属性引用的就是这个窗口本身：　　

parent==self;

如果一个帧包含在另一个帧中，而后者又包含在顶级窗口中，那么该帧就可以使用parent.parent来引用顶级窗口。

注意事项：
分帧不能和body标签及内容体共存

分帧不利于搜索引擎优化，正常前台页面不建议使用分帧。

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。

赞 (0)

相关推荐

  • Lesson02_02 帧标签

    一个窗口中用帧来显示多个网页 <frameset></frameset>     用来定义框架集中有几个帧,及各个帧是如何排列的!<frameset></frameset>标签对嵌套在<html></html>标签对中,也可以嵌套在其它<frameset></frameset>标签对中.<frameset></frameset>标签对 不能嵌套在<body></body

  • Android截取视频帧并转化为Bitmap示例

    MainActivity如下: 复制代码 代码如下: package cn.testmediametadataretriever; import java.io.File; import java.io.FileOutputStream; import android.media.MediaMetadataRetriever; import android.os.Bundle; import android.os.Environment; import android.app.Activity;

  • div层跨越iframe帧显示在上面的解决方法附代码

    其实解决办法很简单,是从网上看到的,在弹出的层里加入<iframe>即可解决: <div style="position:absolute;width:140;height:200;z-index:10"><iframe src="menu.asp" width='100%' height='100%'></iframe></div>-------弹出的层 <div style="posti

  • 百度编辑器 如何获取光标位置与不同帧内的节点

    百度编辑器 如何获取光标位置与不同帧内的节点

    var range = editor.selection.getRange();var td = domUtils.findParentByTagName( range.startContainer, 'td', true ); 当我们console.log(domUtils)的时候,可以在控制台中,看见很多domUtils下的方法,这些方法都是用于操作节点的,findParentByTagName()顾名思义,获取的是节点,当我们的光标在编辑器内容处,而我们要获取相应内容外层节点的id以及各种

  • C#获取视频某一帧的缩略图的方法

    本文实例讲述了C#获取视频某一帧的缩略图的方法.分享给大家供大家参考.具体实现方法如下: 读取方式:使用ffmpeg读取,所以需要先下载ffmpeg.网上资源有很多. 原理是通过ffmpeg执行一条命令获取视频某一帧的缩略图. 首先,需要获取视频的帧高度和帧宽度,这样获取的缩略图才不会变形. 获取视频的帧高度和帧宽度可以参考:http://www.jb51.net/article/57475.htm. 获取到视频的帧高度和帧宽度后,还需要获取缩略图的高度和宽度,这是按比例缩放的. 比如你存放缩略

  • 如何实现iframe(嵌入式帧)的自适应高度

    好几次看到有人提问问到如何实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象,刚好我在工作中也碰到了类似问题,于是上网翻查,东抄抄西看看,弄出来这么一个函数,贴到页面里面就能用了.不敢独享,大家要是觉得有用,欢迎使用 源代码如下 复制代码 代码如下: <script type="text/javascript">  //** iframe自动适应页面 **// //输入你希望根据页面高度自动调整高度的iframe的

  • 复杂的javascript窗口分帧解析

    什么是窗口分帧? 窗口分帧就是把一个浏览器文档窗口分隔成多个窗口,每个窗口都可以显示一个独立的网页文件,每个帧(即页面)都有自己的url. 帧窗口该如何创建? 帧通常是由<frameset>和<frame>标记创建的.但在HTML 4中,<iframe>标记也可以用来在文档中创建"内联帧".就JavaScript来说,<iframe>创建的帧与<frameset>和<frame>创建的帧一样. 在HTML中用<

  • 跟我学习javascript的var预解析与函数声明提升

    1.var 变量预编译 JavaScript 的语法和 C .Java.C# 类似,统称为 C 类语法.有过 C 或 Java 编程经验的同学应该对"先声明.后使用"的规则很熟悉,如果使用未经声明的变量或函数,在编译阶段就会报错.然而,JavaScript 却能够在变量和函数被声明之前使用它们.下面我们就深入了解一下其中的玄机. 先来看一段代码: (function() { console.log(noSuchVariable);//ReferenceError: noSuchVari

  • JavaScript:Date类型全面解析

    创建一个日期对象,使用new操作符后跟Date的构造函数. var date = new Date(); 调用默认构造函数情况下,新创建的日期自动获得当前时间和日期.如果需要指定日期和时间,需要传入表示该日期的毫秒数. JavaScript中提供了两个方法来计算日期,Date.parse()方法接收一个表示日期的字符串参数,然后根据这个日期返回相应的日期毫秒数.但是日期的格式往往因实现以及地区而异.Date.UTC()也返回表示日期的毫秒数,它的参数分别是年份.基于0的月份(一月是0).月中的那

  • JavaScript中的正则表达式解析

    JavaScript中的正则表达式解析 正则表达式(regular expression)对象包含一个正则表达式模式(pattern).它具有用正则表达式模式去匹配或代替一个字符串(string)中特定字符(或字符集合)的属性(properties)和方法(methods).要为一个单独的正则表达式添加属性,可以使用正则表达式构造函数(constructor function),无论何时被调用的预设置的正则表达式拥有静态的属性(the predefined RegExp object has s

  • javascript运算符——逻辑运算符全面解析

    前面的话 逻辑运算符对操作数进行布尔运算,经常和关系运算符一样配合使用.逻辑运算符将多个关系表达式组合起来组成一个更复杂的表达式.逻辑运算符分为逻辑非'!'.逻辑与'&&'.逻辑或'||'3种,本文将介绍这三种逻辑运算符 逻辑非 逻辑非操作符由一个叹号(!)表示,可以应用于ECMAScript中的任何值.无论这个值是什么数据类型,这个操作符都会返回一个布尔值.逻辑非操作符首先会将它的操作数转换成一个布尔值,然后再对其求反 逻辑非对操作数转为布尔类型的转换类型与Boolean()转型函数相同

  • JavaScript:Array类型全面解析

    JavaScript中的数组类型与其他语言中的数组有着很大的区别.JavaScript中的每一项可以保存任何类型的数据.而且,JavaScript数组的大小是可以动态调整的,可以随着数据的添加自动增长以容纳新增数据. 创建数组的基本形式有两种. 1.Array构造函数 var cities = new Array(); 如果预先知道要保存的项目数量,也可以给构造函数传递该数量,该数量会自动变成length属性的值. var cities = new Array(3); 也可以向Array构造函数

  • javaScript中的原型解析【推荐】

    最近在学习javaScript,学习到js面向对象中的原型时,感悟颇多.若有不对的地方,希望可以指正. js作为一门面向对象的语言,自然也拥有了继承这一概念,但js中没有类的概念,也就没有了类似于java中的extends,所以,我觉得js中的继承主要依赖于js中的原型(链). 那么,原型是什么呢?我们知道js中函数亦是一种对象,当我们创建一个函数时,其实这个函数也就默认的拥有了一个属性叫做prototype,这个属型叫做原型属性,他是一个指针,指向了这个函数的原型对象,这个原型对象有一个默认的

  • javascript闭包概念简单解析(推荐)

    关于"闭包"这个概念的文章在网上铺天盖地,基本已经稀烂了,但是有时候总感觉读了这么多的文章还是云山雾罩,当然是由于它本身就比较难于理解和涉及的知识较多,还有一个很重要的原因就是网上很多教程介绍可能存在一定的误区,或者说侧重点不同,下面就通过代码实例简单的介绍一下什么是闭包. 代码实例一: function a(){ var webName="我们"; console.log(webName); } a() 以上是一段非常简单的代码,当函数执行结束之后,它就会从内存中

  • python实现批量视频分帧、保存视频帧

    本篇博客介绍利用python脚本实现视频分帧,并将每一帧保存到本地.主要基于opencv包来实现,在运行代码前确保opencv包已正确安装.下面是主要代码: import os import cv2 videos_src_path = '/home/shao/violence_detection_code/Movies_Dataset/fights' videos_save_path = '/home/shao/violence_detection_code/Movies_Dataset/fig

  • python实现视频分帧效果

    本文实例为大家分享了python实现视频分帧的具体代码,供大家参考,具体内容如下 import cv2 vidcap = cv2.VideoCapture('005.avi') success,image = vidcap.read() count = 0 success = True while success: success,image = vidcap.read() cv2.imwrite("frame%d.jpg" % count, image) # save frame a

随机推荐