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 相关文章推荐
学习jquery之一
Apr 27 Javascript
javascript css styleFloat和cssFloat
Mar 15 Javascript
JS DOM 操作实现代码
Aug 01 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
Aug 09 Javascript
详解JavaScript跨域总结与解决办法
Oct 31 Javascript
Vue 换肤的示例实践
Jan 23 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
angular-tree-component的使用详解
Jul 30 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
vue+php实现的微博留言功能示例
Mar 16 Javascript
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
JavaScript文档对象模型DOM
Nov 20 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
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
解决GD中文乱码问题
2007/02/14 PHP
php URL跳转代码 减少外链
2011/06/25 PHP
PHP源代码数组统计count分析
2011/08/02 PHP
javascript 年月日联动实现核心代码
2009/12/21 Javascript
js实现收缩菜单效果实例代码
2013/10/30 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
js获取form的方法
2015/05/06 Javascript
js实现简单的验证码
2015/12/25 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
原生JS实现网络彩票投注效果
2016/09/25 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
python复制文件代码实现
2013/12/23 Python
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
python实现发送邮件功能
2017/07/22 Python
浅谈Django的缓存机制
2018/08/23 Python
wxpython绘制圆角窗体
2019/11/18 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
以幸福为主题的活动方案
2014/08/22 职场文书
法定代表人免职证明
2015/06/24 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
开学典礼致辞
2015/07/29 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
oracle通过存储过程上传list保存功能
2021/05/12 Oracle
Python一些基本的图像操作和处理总结
2021/06/23 Python
java如何实现获取客户端ip地址的示例代码
2022/04/07 Java/Android