复杂的javascript窗口分帧解析


Posted in Javascript onFebruary 19, 2016

什么是窗口分帧?

    窗口分帧就是把一个浏览器文档窗口分隔成多个窗口,每个窗口都可以显示一个独立的网页文件,每个帧(即页面)都有自己的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,framesparent属性来引用其他帧。

任何窗口或帧中的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程序设计有所帮助。

Javascript 相关文章推荐
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
Dec 02 Javascript
javascript 节点排序 2
Jan 31 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
举例详解JavaScript中Promise的使用
Jun 24 Javascript
js数组常见操作及数组与字符串相互转化实例详解
Nov 10 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
Sep 28 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
Feb 19 #Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 #Javascript
谈一谈javascript中继承的多种方式
Feb 19 #Javascript
多种js图片预加载实现方式分享
Feb 19 #Javascript
JS实现1000以内被3或5整除的数字之和
Feb 18 #Javascript
ECharts仪表盘实例代码(附源码下载)
Feb 18 #Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 #Javascript
You might like
php smarty模版引擎中变量操作符及使用方法
2009/12/11 PHP
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
php中session使用示例
2014/03/29 PHP
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
jquery链式操作的正确使用方法
2014/01/06 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
Bootstrap中CSS的使用方法
2016/02/17 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
electron制作仿制qq聊天界面的示例代码
2018/11/26 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
python爬虫实战之爬取京东商城实例教程
2017/04/24 Python
多版本Python共存的配置方法
2017/05/22 Python
Python获取当前函数名称方法实例分享
2018/01/18 Python
python3 selenium 切换窗口的几种方法小结
2018/05/21 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
安全检查验收制度
2014/01/12 职场文书
护士毕业生自荐信
2014/02/07 职场文书
《老山界》教学反思
2014/04/08 职场文书
护理专科学生自荐书
2014/07/05 职场文书
学习计划书怎么写
2014/09/15 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫