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页面顶部卷动广告效果
Dec 01 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
Feb 11 Javascript
深入理解JavaScript系列(13) This? Yes,this!
Jan 18 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
JS实现多物体缓冲运动实例代码
Nov 29 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
JavaScript async/await原理及实例解析
Dec 02 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
php魔术函数__call()用法实例分析
2015/02/13 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
javascript实现倒计时跳转页面
2016/01/17 Javascript
浅谈javascript中的加减时间
2016/07/12 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
vue 封装 Adminlte3组件的实现
2020/03/18 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
Python内置函数的用法实例教程
2014/09/08 Python
python中self原理实例分析
2015/04/30 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
python实现简易通讯录修改版
2018/03/13 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
python实现图片中文字分割效果
2019/07/22 Python
python多线程扫描端口(线程池)
2019/09/04 Python
python实现四人制扑克牌游戏
2020/04/22 Python
python多线程和多进程关系详解
2020/12/14 Python
用Python实现职工信息管理系统
2020/12/30 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
九年级历史教学反思
2014/01/27 职场文书
秋天的图画教学反思
2014/05/01 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
2014年度安全工作总结
2014/12/04 职场文书
幽默导游词开场白
2015/05/29 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
动漫APP软件排行榜前十名,半次元上榜,第一款由腾讯公司推出
2022/03/18 杂记
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript
MySQL控制流函数(-if ,elseif,else,case...when)
2022/07/07 MySQL