复杂的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.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
Jul 28 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 Javascript
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
微信小程序可滑动周日历组件使用详解
Oct 21 Javascript
vue - props 声明数组和对象操作
Jul 30 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
一个改进的UBB类
2006/10/09 PHP
php Undefined index的问题
2009/06/01 PHP
php中使用preg_replace函数匹配图片并加上链接的方法
2013/02/06 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
javascript常用方法汇总
2014/12/02 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
python实现学员管理系统
2019/02/26 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
高二物理教学反思
2014/02/08 职场文书
综合办公室主任岗位职责
2014/04/13 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
私人贷款担保书该怎么写呢?
2019/07/02 职场文书
微信小程序实现拍照和相册选取图片
2021/05/09 Javascript
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
Python实现机器学习算法的分类
2021/06/03 Python
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server