JavaScript Window浏览器对象模型原理解析


Posted in Javascript onMay 30, 2020

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。

浏览器对象模型 (BOM)

浏览器对象模型(Browser Object Model (BOM))尚无正式标准。

由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 BOM 的方法和属性。

Window 对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一:

window.document.getElementById("header");

与此相同:

document.getElementById("header");

Window 尺寸

有三种方法能够确定浏览器窗口的尺寸。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)

对于 Internet Explorer 8、7、6、5:

document.documentElement.clientHeight
document.documentElement.clientWidth

或者

document.body.clientHeight
document.body.clientWidth

实用的 JavaScript 方案(涵盖所有浏览器):

实例

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

该例显示浏览器窗口的高度和宽度。

其他 Window 方法

一些其他方法:

  • window.open() - 打开新窗口
  • window.close() - 关闭当前窗口
  • window.moveTo() - 移动当前窗口
  • window.resizeTo() - 调整当前窗口的尺寸

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
May 10 Javascript
THREE.JS入门教程(5)你应当知道的十件事
Jan 24 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
Jul 04 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 Javascript
深入了解query和params的使用区别
Jun 24 Javascript
基于canvasJS在PHP中制作动态图表
May 30 #Javascript
jQuery实现视频展示效果
May 30 #jQuery
vue实现购物车加减
May 30 #Javascript
基于vue和bootstrap实现简单留言板功能
May 30 #Javascript
JS常见内存泄漏及解决方案解析
May 30 #Javascript
react结合bootstrap实现评论功能
May 30 #Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 #jQuery
You might like
php5.2.0内存管理改进
2007/01/22 PHP
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
jquery插件validate验证的小例子
2013/05/08 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
jquery实现文本框的禁用和启用
2016/12/07 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
Angular获取手机验证码实现移动端登录注册功能
2017/05/17 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
Python迭代器Iterable判断方法解析
2020/03/16 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
请解释在new与override的区别
2012/10/29 面试题
校园十佳歌手策划书
2014/01/22 职场文书
小学中秋节活动方案
2014/02/06 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
2016年元旦寄语
2015/08/17 职场文书
志愿服务心得体会
2016/01/15 职场文书
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript