javascript三大模块之一：BOM（浏览器对象模型）---window（一）

小咪咪 2022-02-04 21:25 208阅读 0赞

## BOM（浏览器对象模型） ##

window对象------BOM的核心  
**ECMAScript是JavaScript的核心，但如果在Web中使用JavaScript，BOM无疑是真正的核心。**  
BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何的网页内容无关。浏览器之间共有的对象就成为事实上的标准。  
这些对象在浏览器中得以存在，很大程度上是由于它们提供了与浏览器的互操作性。**W3C为了把浏览器中的JavaScript最基本的部分标准化，已经将BOM的主要方面纳入了HTML5的规范。**

--------------------

## window对象 ##

> BOM的核心对象是window，它表示浏览器的一个实例。  
> 在浏览器中，window对象有双重角色，它既是JavaScript访问浏览器窗口的一个接口，也是ECMAScript规定的Global对象。  
> 这个意味着在所有的网页中，定义的任何一个对象、变量、函数都以window作为Global对象，因此有权访问parseInt()等方法。

## 全局作用域 ##

由于**window对象同时扮演着JavaScript的Global对象，因此所有的全局作用域声明的变量、函数都会变成window对象的属性和方法**。

var age= 19;
    function sayAge(){ 
    	alert(this.age);
    }
    alert(window.age);//19
    sayAge();//19
    window.sayAge();//19

全局作用域下定义了一个变量和函数，它们被自动归在了window对象。可以通过window.age访问变量age，同理，也可以访问函数sayAge()。  
由于sayAge()在全局作用域中，所以this.age被映射到window.age，最终显示的结果仍然是age的值。  
抛开全局变量会成为window对象的属性不谈，定义的全局变量与在window对象上直接定义的变量的区别在于：**全局变量不能通过delete删除，而直接在window对象上直接定义的属性却可以**。如下所示：

var age = 29;//全局作用域下定义的age变量
    window.color="red";//window对象上定义的变量color
    delete window.age;//使用delete删除全局定义的age
    delete window.color;//删除window对象上定义的变量color
    alert(window.age);//弹出age，29
    alert(window.color);//弹出color，undefined

**`delete window.age;`在IE<9时抛出错误，在其他浏览器中会返回false。**  
**`delete window.color;`在IE<9时抛出错误，在其他浏览器中会返回true。**

> 刚才使用**var语句添加window属性有一个名为\[\[Configurable\]\]的特性，这个特性的值被设置为false**，因此这样定义的属性不可以通过delete操作删除。

## 兼容性：对delete删除window属性 ##

IE8及之前的版本在使用delete删除window属性时，不管最初属性是怎么创建的，都会抛出错误。IE9及更高版本，不会抛出错误。

## 您知道，啊？ ##

尝试访问未声明的变量会抛出错误，但是通过查询window对象，可以知道某个为声明的变量是否存在。

var newValue = oldValue;//这里会抛出错误，因为oldValue未定义
    var newValue = window.oldValue;//这里不会抛出错误，因为这是一次属性查询

location和navigator实际上是window对象的属性。

> window Mobile 平台**不允许**通过window.property = value;之类的形式，直接在window对象上创建的属性或方法。  
> 可是**在全局作用域中，声明的所有变量和函数，都会变成window对象的成员**。

--------------------

## 窗口关系及框架 ##

如果页面中包含框架，则每个框架都有自己的window对象，并且保存在frames集合中。在frames中，可以通过索引（从0开始，从左到右，从上至下）或者框架名称来访问相应的window对象。  
每个window对象都有一个name属性，其中包含框架的名称。如下所示：

<!DOCTYPE html>
    
    
    <html>
    <head>
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<title></title>
    	<link rel="stylesheet" href="">
    </head>
    <frameset rows="160,*">
    	<frame src="frame.html" name="topFrame"></frame>
    	<frameset cols="20%,80%">
    		<frame src="anotherframe.html" name="leftFrame"></frame>
    		<frame src="yetanoherframe.html" name="rightFrame" ></frame>
    	</frameset>
    </frameset>
    </html>

## 分析上面的框架： ##

上面的代码中，我们可以看到frame标签之后，都有一个name属性，并且他们的值是不一样的。src我们框架的结构里面的内容的路径。  
上面的框架结构为一个在上两个在下。对于这个例子而言，我们可以通过window.frames\[0\]或者window.frames\[“topFrame”\]来引用上面的框架。不过，**最好使用top，如top.frames\[0\] 。**  
我们知道**top对象始终指向最上（最外）层的框架，也就是浏览器窗口。**  
使用top可以确保每次都正确访问框架，因为对于一个框架中编写的任何代码来说，其中window对象都是那个框架的特定实例，而非最高层框架。

## frame.html ##

这个文件是上面讲的框架的topFrame部分的代码。做一个例子。剩下的左边和右边的代码我就不放了。

<!DOCTYPE html>
    
    <html>
    <head>
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<title></title>
    	<link rel="stylesheet" href="">
    </head>
    <body>
    	我是主人在JavaScript中学到的frame框架哦
    </body>
    </html>

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70]

## 编程是自己选择的路，再苦再累，都得走下去。但是也要注意身体啊！！！所以宝宝们和我，学习归学习，身体健康是资本啊！！ ##

--------------------

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70]: /images/20220205/9a7be4f199b7410cb5dd8ac8c61996ea.png