JavaScript BOM
最后更新于:2022-04-01 11:44:11
**JavaScript特性:**
* 交互性
* 安全性(不可以直接访问本地硬盘)
* 跨平台性(只要是可以解析js的浏览器都可以执行,和平台无关)
**JavaScript三大核心:**
1)核心(ECMAScript):描述了JS的语法和基本对象。
2)文档对象模型 ☆(DOM):处理网页内容的方法和接口
3)浏览器对象模型(BOM):与浏览器交互的方法和接口
[![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-06_572c45a78428a.jpg)](http://www.flyne.org/wp-content/uploads/2014/08/three-parts-of-JS.jpg)
**BOM对象:**
1\. DOM 是 W3C 的标准; [所有浏览器公共遵守的标准]
2\. BOM 是 各个浏览器厂商根据 DOM
在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]
3\. window 是 BOM 对象,而非 js 对象;
**BOM常用操作:**
弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口大小
提供 Web 浏览器详细信息的定位对象
提供用户屏幕分辨率详细信息的屏幕对象
对 cookie 的支持
IE 扩展了 BOM,加入了 ActiveXObject 类,可以通过 JavaScript 实例化 ActiveX 对象
javacsript是通过访问BOM(Browser Object Model)对象来访问、控制、修改客户端(浏览器),由于BOM的window包含了document,window对象的属性和方法是直接可以使用而且被感知的,因此可以直接使用window对象的document属性,通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM(Document Object Model)模型的根节点。可以说,BOM包含了DOM(对象),浏览器提供出来给予访问的是BOM对象,从BOM对象再访问到DOM对象,从而js可以操作浏览器以及浏览器读取到的文档。其中
DOM包含:
Window对象包含属性:document、location、navigator、screen、history、frames
Document根节点包含子节点:forms、location、anchors、images、links
从window.document已然可以看出,DOM的最根本的对象是BOM的window对象的子对象。
区别:DOM描述了处理网页内容的方法和接口,BOM描述了与浏览器进行交互的方法和接口。
window对象的全局作用域:
由于window对象同时扮演着ECMASript中Global对象的角色,因此所有在全局作用域中声明的变量,函数都会变成window对象的属性和方法。
~~~
var age=29;
function sayAge(){
alert(this.age);
}
alert(window.age); //29
sayAge(); //29
window.sayAge(); //29
~~~
全局作用域中定义了一个变量age和一个函数sayAge(),他们被自动归在了window对象的名下。于是,可以通过window.age访问变量age,可以通过window.satAge()访问函数sayAge()。由于agyAge()存在于全局作用域中,因此this.age被映射到window.age,最终显示的是正确的结果。
全局变量会成为window对象的属性,而且定义全局变量与在window对象上直接定义属性还是有一点差别:全局变量不能通过delete操作符删除,而直接在window对象上的定义的属性可以;
~~~
var age=29;
function sayAge(){
alert(this.age);
}
delete window.age;
~~~
窗口关系及框架
如果页面中包含框架,则每个框架都拥有自己的window对象,并且保存在frames集合中。在frames集合中,可以通过数值索引或者框架名称来访问对应的window对象。每个window对象都有一个name属性,其中包含框架的名称。
导航和打开窗口
使用window.open()方法既可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。这个方法可以接收4个参数:需加载的URL,窗口目标,一个特性字符串以及一个标示新页面是否取代浏览器历史记录中当前加载页面的布尔值。通过只需要传递第一个参数;最后一个参数只在不打开新窗口的情况下使用。
如果window.open()传递了第二个参数,而且该参数是已有窗口或框架的名称,那么就会在其有该名称的窗口或框架中加载第一个参数指定的URL.
~~~
window.open("http://www.baidu.com",'百度');
~~~
**1.弹出窗口**
如果给window.open()传递的第二个参数并不是一个已经存在的窗口或者框架,那么该方法就会根据在第三个参数位置传入的字符串创建一个新窗口或者标签页。如果没有传入第三个参数,那么就会打开一个带有全部默认设置的新窗口;具体弹出窗口后面详解
**2.安全限制**
现在很多浏览器都对弹出窗口做了很多安全限制,包括不允许再屏幕之外创建弹出窗口,不允许将弹出窗口移到屏幕以外,不允许关闭状态栏等。不允许关闭地址栏。
**3.弹出窗口屏蔽程序**
大多数浏览器都内置有弹出窗口屏蔽程序,而没有内置该类程序的浏览器,也可以安装在YAhoo等带有内容中屏蔽程序的使用工具,下面的例子可以检测弹出窗口是否被屏蔽,如果屏蔽的话会返回null;
~~~
var name=window.open("http://www.baidu.com",'百度');
alert(name);
~~~