BOM,文档宽高及窗口事件小析
(一)BOM:Browser Object Model(浏览器对象模型)
页面上所有的变量都是window的属性
一、方法:
1. open(,)
打开一个新窗口(页面)
一参为页面地址url,二参为打开方式
如果url为空,默认打开一个空白页面
如果打开方式为空,默认打开新窗口方式打开
返回值:发挥新打开的窗口的window对象
2. close(,)
关闭窗口,前边对象是谁关闭谁
兼容:(1)火狐ff:默认无法关闭
(2)Chorme:默认直接关闭
(3)ie:询问用户
可以关闭在本窗口中通过js方法打开的新窗口
二、属性:
1. window.navigator.userAgent ==>浏览器信息(可用于不同浏览器采取不同的措施)
2. window.location ==>浏览器地址信息,返回object对象
因此其下还有属性:
window.location.href ==>地址栏的地址
window.location.search ==>url中?之后的内容(包括?)
window.location.hash ==>url中#之后的内容(包括#)
(二)文档的宽高
1. document.documentElement.clientWidth[Height] ==>可视区宽高(因为document无宽高,所以加上documentElement
,其中document.documentElement可换成任何有宽高属性的元素,下同)
document.documentElement.scrollTop[Left] ==>滚动条滚动距离(有兼容chrome认为滚动按钮算作在body里)
兼容处理:
var ScrollTop=document.documentElement.scrollTop||document.body.scrollTop;
2. 盒子元素.scrollHeight[Width] ==>盒子内容宽高
3. document.documentElement.offsetWidth[Height] ==>文档可视宽高
(三)窗口事件
onscroll ==>当滚动条滚动时触发
onreset ==>当窗口大小发生改变时触发
注:这两个事件的触发是按时间间隔计算,改变速度快,触发次数少,改变速度慢,触发事件的次数多
eg:var i=0;
window.onscroll=function(){
document.title=i++;
}
BOM,文档宽高及窗口事件小析的更多相关文章
- JS中级 - 03:文档宽高及窗口事件(选)
可视区尺寸 document.documentElement.clientWidth document.documentElement.clientHeight 滚动距离 document.body. ...
- JavaScript -获取屏窗与视窗、文档宽高
实例:1920*1080的电脑屏幕 1.获取窗口中的文档显示区域宽高 clientw = window.innerWidth; //1920(包含滚动条) clienth = window.inner ...
- js实现字体和容器宽高随窗口改变
用于字体大小和容器的宽高字体和宽高设为rem就可以了 var html = document.documentElement; function fonts(){ var hW = html.offs ...
- js学习笔记23----窗口尺寸及窗口事件
窗口尺寸: 可视区的尺寸 document.documentElement.clientWidth document.documentElement.clientHeight 滚动距离 documen ...
- js、jQuery 获取文档、窗口、元素的各种值
基于两年开发经验,总结了 javascript.jQuery 获取窗口.文档.元素的各种值 javascript: 文档:是整个document所有的内容 浏览器当前窗口文档body的宽度: docu ...
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
- ABP文档笔记 - 事件BUS
文档: ABP框架 - 领域事件(EventBus) EventBus & Domain Events ABP源码分析二十五:EventBus EventBus(事件总线) EventBus是 ...
- ie低版本内核事件兼容问题(事件绑定,绑定事件自动执行,文档模式问题)
问题情况 搜狗等,兼容模式下,以前前端写的点击事件的代码没有, 后来一看是因为兼容模式为9,导致点击事件失效 解决办法,步骤 1,处理绑定事件兼容问题 ie低版本绑定事件只支持attactevent, ...
- angularjs 监听 文档click 事件
项目 上遇到 innHTML 放入 一大段的html 内容 中带有 click 事件 如onclick="callInMethod("http://www.crm.bmcc.c ...
随机推荐
- spring-quartz.xml
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns:xsi="http://ww ...
- R语言——七月
这两个月没有写什么代码.也没做什么大项目,基本就是对以前写的那个用ggplot2可视化数据的项目做一些增增补补,大部分技术难关都在ggplot2和R语言EXCEL处理这里解决并总结了.然后业余帮人修改 ...
- Android高手速成--第四部分 开发工具及测试工具
第四部分 开发工具及测试工具 主要介绍和Android开发工具和测试工具相关的开源项目. 一.开发效率工具 Json2Java根据JSon数据自动生成对应的Java实体类,还支持Parcel.Gson ...
- jQuery入门(2)使用jQuery操作元素的属性与样式
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- php魔术方法和魔术常量
1.__construct() 实例化对象时被调用, 当__construct和以类名为函数名的函数同时存在时,__construct将被调用,另一个不被调用. 2.__destruct() 当删除一 ...
- PHPStorm XDebug的安装
环境: 我的系统: 4.4.0-43-generic #63-Ubuntu SMP Wed Oct 12 13:48:03 UTC 2016 x86_64 x86_64 x86_64 GNU/Linu ...
- JScrollBar
接到了GUI相关的task,从来没看Java的我只好各种百度加看书了.这里介绍了 JScrollBar 的简单应用. 话不多说,直接上代码和效果图. import java.awt.*; imp ...
- iOS创建自定义的xib视图,不带控制器调用
1 我们平常使用视图都是在控制器中加载各种视图,但是有时候一个单独的视图,弄一个控制器未免有些显得太沉重了,所以我们现在来创建一个带xib加载视图的自定义视图 2 创建一个视图类集成uiview 3 ...
- sql单表中某一字段重复,取最近3条或几条数据
order by a.uid,a.id; sql查询语句,针对需求:一个表中某一字段是有重复的数据,针对该字段相同的值只取最近的3条或要求的几条: --记录铭心!
- js脚本语言
alert(): 输出 字符串 转成整数 parseint(字符串):运算符与表达式% 取余 aler(10%2)余0 逻辑运算符&&并 ||或 !非 判断条件比较运算符== 等于 ! ...