JS--JavaScript操作BOM（浏览器对象模型、window对象概述、window.open()方法打开窗口）

迈不过友情╰ 2021-08-13 17:51 461阅读 0赞

#### window对象 ####

window对象是BOM的核心，代表浏览器窗口的一个实例。在浏览器中，window对象既是JavaScript访问浏览器窗口的接口，又是JavaScript的全局对象（Global）。因此在全局作用域中声明的所有变量和函数也是window对象的属性和方法。

#### 访问浏览器窗口 ####

通过window对象可以访问浏览器窗口，同时与浏览器相关的其他客户端对象都是window的子对象，通过window属性进行引用。客户端各个对象之间存在一种结构关系，这种关系构成浏览器对象模型，window对象代表根节点，如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]

*  **window：**  
    客户端JavaScript中的顶层对象。每当< body > 或 < frameset >标签出现时，window对象就会被自动创建
 *  **navigator：**  
    包含客户端有关浏览器的信息
 *  **screen：**  
    包含客户端显示屏的信息
 *  **history：**  
    包含浏览器窗口访问过的URL信息
 *  **location：**  
    包含当前网页文档的URL信息
 *  **document：**  
    包含整个HTML文档，可被用来访问文档内容，及其所有页面元素。

#### 全局作用域 ####

客户端JavaScript代码都在全局上下文环境中运行，window对象提供了全局作用域。由于window对象是全局作用域，因此所有的全局变量都被视为该对象的属性。

示例：在脚本中定义一个变量或函数时，可以通过window对象访问它们

var a = "window.a";	//全局变量
    function f(){ 	//全局变量
    	alert(a);
    }
    alert(window.a);//引用window对象的属性a，返回字符串“window.a”
    window.f()	//调用window对象的方法f()，返回字符串“window.a”

定义全局变量与在window对象上直接定义属性还有一点不同：**全局变量不能通过delete运算符删除，而直接在window对象上定义的属性可以被删除。**

示例：

va a = "a";
    window.b = "window.b";
    c = "c";
    alert(delete window.a)://返回false，删除失败
    alert(delete window.b)://返回ture，删除成功
    alert(delete window.c)://返回true，删除成功
    alert(window.a)://返回“a”
    alert(window.b)://返回undefined
    alert(window.c)://返回undefined

使用var语句声明全局变量，window会为这个属性定义一个名为“configurable”的特性，这个特性的值被设置为false，这样该属性就不可以通过delete运算符删除。

示例：

//直接访问未声明的变量，JavaScript会抛出异常，但是通过window对象进行访问，可以判断未声明的变量是否存在
    alert(window.a);	//返回undefined
    alert(a);	//抛出异常

#### 打开和关闭窗口 ####

使用window对象的open()方法，可以打开一个新窗口，返回值为新创建的window对象，使用这个window对象可以引用新创建的窗口。用法如下：

window.open(URL, name, features, replace)

*  **URL：**  
    可选字符串，声明在新窗口中显示文档的URL。如果省略，或者为空，则新窗口就不会显示任何文档。
 *  **name：**  
    可选字符串，声明新窗口的名称。这个名称可以用作标记< a > 和 < form >的属性target的值。如果该参数指定了一个已经存在的窗口，那么open()方法就不再创建一个新窗口，而只是返回对指定窗口的引用，在这种情况下，features参数将被忽略。
 *  **features：**  
    可选字符串，声明了新窗口要显示的标准浏览器的特征，具体说明如下表所示，如果省略该参数，新窗口将具有所有标准特征。
 *  **replace：**  
    可选的布尔值，规定了装载到窗口的URL是在窗口的浏览器历史中创建一个新条目，还是替换浏览器历史中的当前条目。

**新窗口的特征表:**

<table> 
 <thead> 
  <tr> 
   <th align="center">特征</th> 
   <th align="center">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">channelmode=yes丨no丨1丨0</td> 
   <td align="center">是否使用剧院模式显示窗口。默认为no</td> 
  </tr> 
  <tr> 
   <td align="center">directories=yes丨no丨1丨0</td> 
   <td align="center">是否添加目录按钮。默认为yes</td> 
  </tr> 
  <tr> 
   <td align="center">fullscreen=yes丨no丨1丨0</td> 
   <td align="center">是否使用全屏模式显示浏览器。默认是no。处于全屏模式的窗口必须同时处于剧院模式</td> 
  </tr> 
  <tr> 
   <td align="center">height=piedls</td> 
   <td align="center">窗口文档显示区的高度。以像素计</td> 
  </tr> 
  <tr> 
   <td align="center">left=pixels</td> 
   <td align="center">窗口的x坐标。以像素计</td> 
  </tr> 
  <tr> 
   <td align="center">location=yes丨no丨1丨0</td> 
   <td align="center">是否显示地址字段。默认是yes</td> 
  </tr> 
  <tr> 
   <td align="center">menubar=yes丨no丨1丨0</td> 
   <td align="center">是否显示菜单栏</td> 
  </tr> 
  <tr> 
   <td align="center">resizable=yes丨no丨1丨0</td> 
   <td align="center">窗口是否可调节尺寸。默认是yes</td> 
  </tr> 
  <tr> 
   <td align="center">scrollbars=yes丨no丨1丨0</td> 
   <td align="center">是否显示滚动条。默认是yes</td> 
  </tr> 
  <tr> 
   <td align="center">status=yes丨no丨1丨0</td> 
   <td align="center">是否添加状态栏。默认是yes</td> 
  </tr> 
  <tr> 
   <td align="center">titlebar=yes丨no丨1丨0</td> 
   <td align="center">是否显示标题栏。默认是yes</td> 
  </tr> 
  <tr> 
   <td align="center">toolbar=yes丨no丨1丨0</td> 
   <td align="center">是否显示浏览器的工具栏。默认是yes</td> 
  </tr> 
  <tr> 
   <td align="center">top=pixels</td> 
   <td align="center">窗口的y坐标</td> 
  </tr> 
  <tr> 
   <td align="center">width=pixels</td> 
   <td align="center">窗口的文档显示区的宽度。以像素计</td> 
  </tr> 
 </tbody> 
</table>

新创建的window对象拥有一个opener属性，它保存着打开它的原始窗口对象。opener只在弹出窗口的最外层window对象（top）中定义，而且指向调用window.open()方法的窗口或框架。

示例：演示打开窗口与原窗口之间的关系

myWindow = window.open();	//打开新的空白窗口
    myWindow.document.write("<h1>这是新打开的窗口</h1>");//在新窗口中输出提示信息
    myWindow.focus();	//让新窗口获取焦点
    myWindow.opener.document.write("<h1>这是原来的窗口</h1>");//在原窗口中输出提示信息
    alert(myWindow.opener == window());	//检测window.opener属性值

虽然弹出窗口中有一个指针（opener）指向打开它的原始窗口，但原始窗口中并没有这样的指针指向弹出窗口。窗口并不跟踪已打开的弹出窗口，因此必要时只能手动实现跟踪。  
有些浏览器（如Chrome）会在独立的进程中运行每个标签页。当一个标签页打开另一个标签页时，如果两个window对象之间需要通信，那么新标签页就不能运行在独立的进程中。在Chrome中将新创建的标签页的opener属性设置为null，即表示在单独的进程中运行新标签页。

myWindow = window.open();
    myWindow.opener == null();

**使用window对象的close()方法可以关闭一个窗口：**

w.close()；//关闭一个新创建的w窗口

如果在打开窗口内部关闭自身窗口，则应该使用以下方法。

window.close()；

**使用window.closed属性可以检测当前窗口是否关闭，如果关闭返回true，否则返回false。**  
示例：自动弹出一个窗口，然后在5秒之后自动关闭该窗口，同时允许用户单击页面超链接，更换团出窗口内显示的网页URL

示例：很多浏览器会禁止JavaScript弹出窗口，如果在浏览器禁止的情况下，使用open()打开新窗口，将会抛出一个异常，说明打开窗口失败。为了避免此类问题，同时为了了解浏览器是否支持禁用弹窗行为，可以使用下面的代码进行探测：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]: /images/20210813/af470aecfe084f94baac04e92abdb9d7.png