window对象重要的属性和方法

 

先了解一下BOM的概念：

1. 什么是BOM

BOM，Browser Object Model，即浏览器对象模型。

浏览器页面初始化时，会在内存创建一个全局对象，用来描述当前窗口的属性和状态，这个全局对象被称为浏览器对象模型。

（不同于DOM的标准化组织是W3C，JavaScript的语法标准化组织是ECMA，BOM没有官方标准，它最初是Netscape浏览器标准的一部分，也就是说，对于现代浏览器，每个浏览器都有自己的BOM实现方法，所以直接使用BOM会有兼容性问题。）

但是为了利用JavaScript完成交互，现代浏览器几乎都实现了相同的方法和属性，这些方法和属性被称作BOM的方法和属性。

The Browser Object Model(BOM) allows JavaScript to "talk to" the browser.

简言之，BOM让JavaScript能够和浏览器“对话”。

2. BOM包含哪些内容

BOM有一个核心对象window，

window对象也是BOM的顶级对象，所有浏览器都支持window对象，它代表的是浏览器的窗口。

window对象包含了6大核心模块，分别是：

• document对象，即文档对象

• frames，即HTML自框架

• history，即页面的历史记录

• location，即当前页面的地址

• navigator，包含浏览器相关信息

• screen，用户显示屏幕相关属性

2.1 window对象

JavaScript的所有全局对象、全局方法和全局变量全都自动被归为window对象的方法和属性，

在调用这些方法和属性的时候可以省略window。

DOM也是window对象的属性。

当我们打开网页控制台，输入console.log(window),回车，会发现所有和window对象相关的属性和方法全部展现了出来。

接下来，着重说说window对象的重点属性和方法。

 

window常用的属性

screen.width  显示屏的宽度

screen.height 显示屏的高度

window.innerWidth视窗的宽高

window.innerHeight 视窗的高度

screen.availWidth 屏幕的可用宽度

screen.availHeight屏幕的可用宽度

视窗的宽高是可以改变的，他会因为工具栏或是控制台的变化而变化

屏幕宽高是不会随着浏览器的放大缩小而改变的，即屏幕设备大小是一个客观存在的值，除非更换设备，否则这个值是固定的。

屏幕的可用宽高即屏幕宽高减去如工具栏的值.

在mac中，可用高度就是屏幕高度减去顶部工具栏和底部launchbar的高度（前提是launchbar在底部），如果launchbar在左右两侧，那么可用宽度就会是屏幕宽度减去launchbar宽度的值。

 

window的方法

window.open("http://www.xxxxxxxx.net");  在新的窗口打开链接，一般用于简单的弹出页面

window.close() - 关闭当前窗口

window.moveTo() - 移动当前窗口

window.resizeTo() - 调整当前窗口的尺寸

window.frameElement 获取当前文档的宿主节点iframe元素

window.frames

frame是嵌套在html中的自框架，即在浏览器中嵌入另一个窗口。

window.frames返回的是一个类数组的对象，对象的内容是页面中<iframe>元素

window.framse[0].location = 'https://www.baidu.com'

frames.length;   //子框架的个数

window.history 对象

window.history 对象包含浏览器的历史。window.history对象在编写时可不使用 window 这个前缀。

window.history.back() - 跳转到历史记录中的前一个链接，即加载历史列表中的前一个 URL，与在浏览器点击后退按钮相同，

window.history.forward() -加载历史列表中的下一个 URL。 与在浏览器中点击按钮向前相同

 

window.location 

　　window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。window.location 对象在编写时可不使用 window 这个前缀。

　　location.hostname 返回 web 主机的域名

　　location.pathname 返回当前页面的路径和文件名

　　location.port 返回 web 主机的端口 （80 或 443）

　　location.protocol 返回所使用的 web 协议（http:// 或 https://）

　　window.location.href= "http://www.xxxxxxxx.net" ; 跳转后有后退功能 
　　window.location.replace("http://www.xxxxxxxx.net") ; 跳转后没有后退功能 

       location.assgin  加载一个新的文档

 

　　window.location.reload( ); 刷新当前页面.

　　parent.location.reload( ); 刷新父亲对象（用于框架）

　　opener.location.reload( ); 刷新父窗口对象（用于单开窗口）

　　top.location.reload( ); 刷新最顶端对象（用于多开窗口）

 

window.navigator 

　　window.navigator 对象包含有关访问者浏览器的信息，来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

• navigator 数据可被浏览器使用者更改
• 一些浏览器对测试站点会识别错误
• 浏览器无法报告晚于浏览器发布的新操作系统

　　window.navigator 对象在编写时可不使用 window 这个前缀。

　　window.navigator.appCodeName返回浏览器的内核（chrome, IE, safari和Opera都返回Mozilla）。

　　window.navigator.appName返回浏览器名称（IE11, chrome, firefox, safari都返回Netscape）。

　　window.navigator.appMinorVersion返回浏览器的次版本号。该属性是一个只读的字符串。仅IE有效。

　　window.navigator.userAgent返回代表浏览器名和版本号的字符串。

　　window.navigator.platform返回浏览器平台的字符串（"Win32", "Win16", "WinCE", "Mac68k", "MacPPC", "HP-UX", "SunOS" 等）。

　　window.navigator.cpuClass 返回CPU的信息（"x86", "68K", "Alpha", "PPC" 等）。仅IE有效。

　　window.navigator.browserLanguage返回浏览器的语言种类。仅IE有效。

　　window.navigator.systemLanguage返回系统的语言种类。仅IE有效。

　　window.navigator.userLanguage userLanguage 返回用户环境的语言种类。仅IE有效。

　　window.navigator.cookieEnabled返回 cookie 是否可用的真伪值。

　　window.navigator.onLine返回是否能连上网络的真伪值。

　　window.navigator.javaEnabled()返回 Java 是否可用的真伪值。

　　window.navigator.userProfile保存着用户信息的对象。拥有 addReadRequest() doReadRequest() getAttribute() clearRequest() 等方法。

　　window.navigator.taintEnabled() 是否可以加密数据的真伪值。仅IE有效。

 

    window对象的计时事件

　　setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。

　　window.setInterval() - 间隔指定的毫秒数不停地执行指定的代码。

　　window.setTimeout() - 暂停指定的毫秒数后执行指定的代码

　　window.clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

　　window.clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

      window对象的三种弹窗事件

　　window.alert()- 警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。

　　window.prompt()- 确认框用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。

　　window.confirm()- 提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

 

　　window.execScript() execScript函数与eval的功能相同，不同的是eval函数执行后的脚本的作用域是当前执行上下文，而execScript则总是针对全局作用域。

 

感谢作者：https://www.jianshu.com/p/0c8b34111e95

https://www.cnblogs.com/wqhwe/p/5647061.html