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 相关文章推荐
js同时按下两个方向键
Dec 01 Javascript
JavaScript 输入框内容格式验证代码
Feb 11 Javascript
Js获取事件对象代码
Aug 05 Javascript
js charAt的使用示例
Feb 18 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
详解JavaScript 浮点数运算的精度问题
Jul 23 Javascript
原生js代码能实现call和bind吗
Jul 31 Javascript
node.js实现简单的压缩/解压缩功能示例
Nov 05 Javascript
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 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
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
PHP结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
PHP基于yii框架实现生成ICO图标
2015/11/13 PHP
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
2017/07/21 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
Python在线运行代码助手
2016/07/15 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
python实现简单遗传算法
2018/03/19 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
.NET方向面试题
2014/11/20 面试题
UNIX文件系统分类
2014/11/11 面试题
搞笑婚礼主持词
2014/03/13 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
学校运动会报道稿
2014/09/23 职场文书
故宫的导游词
2015/01/31 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书
导游词之河北白洋淀
2020/01/15 职场文书