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 相关文章推荐
Javascript操作cookie的函数代码
Oct 03 Javascript
JavaScript初学者应注意的七个细节详细介绍
Dec 27 Javascript
java中String类型变量的赋值问题介绍
Mar 23 Javascript
js调用屏幕宽度的简单方法
Nov 14 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
深入理解JavaScript 中的执行上下文和执行栈
Oct 23 Javascript
解决layui checkbox 提交多个值的问题
Sep 02 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 Javascript
JS实现超级好看的鼠标小尾巴特效
Dec 01 Javascript
原生JS实现京东查看商品点击放大
Dec 21 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中的魔术方法详解
2013/06/17 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
Jquery取得iframe下内容的方法
2013/11/18 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
js实现登录与注册界面
2017/11/01 Javascript
代码详解JS操作剪贴板
2018/02/11 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
CountUp.js数字滚动插件使用方法详解
2019/10/17 Javascript
Python实现数据库并行读取和写入实例
2017/06/09 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
值得收藏的10道python 面试题
2019/04/15 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
python做接口测试的必要性
2019/11/20 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
python中matplotlib实现随鼠标滑动自动标注代码
2020/04/23 Python
Python如何重新加载模块
2020/07/29 Python
python 6行代码制作月历生成器
2020/09/18 Python
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
超市国庆节促销方案
2014/02/20 职场文书
志愿者活动总结范文
2014/04/26 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
杭白菊导游词
2015/02/10 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android
Python合并pdf文件的工具
2021/07/01 Python
springboot+WebMagic+MyBatis爬虫框架的使用
2021/08/07 Java/Android
对讲机知识
2022/04/07 无线电