复杂的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 相关文章推荐
ajax异步刷新实现更新数据库
Dec 03 Javascript
实现动画效果核心方式的js代码
Sep 27 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
Oct 18 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
Bootstrap开关(switch)控件学习笔记分享
May 30 Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 Javascript
jquery-mobile表单的创建方法详解
Nov 23 Javascript
Vue js 的生命周期(看了就懂)(推荐)
Mar 29 Javascript
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
vue中三级导航的菜单权限控制
Mar 31 Vue.js
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 过滤危险html代码
2009/06/29 PHP
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
JS实现控制表格行内容垂直对齐的方法
2015/03/30 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
vue数组对象排序的实现代码
2018/06/20 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
Python实现读写INI配置文件的方法示例
2018/06/09 Python
Numpy中的mask的使用
2018/07/21 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
最小二乘法及其python实现详解
2020/02/24 Python
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
Ibatis的核心配置文件都有什么
2014/09/08 面试题
安全施工责任书
2014/08/25 职场文书
介绍信怎么写
2015/01/30 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python