第12章 BOM-KeepStudy

第12章 BOM

### 12.1　window对象 361

##### 12.1.1 Global作用域

>因为 window 对象被复用为 ECMAScript 的 Global 对象，所以通过 var 声明的所有全局变量和函数都会变成 window 对象的属性和方法。

```javascript
var age = 29; 
var sayAge = () => alert(this.age); 
alert(window.age); // 29
sayAge(); // 29 
window.sayAge(); // 29
```

##### 12.1.2  窗口关系

- top 对象始终指向最上层（最外层）窗口，即浏览器窗口本身。
- parent 对象则始终指向当前窗口的父窗口。如果当前窗口是最上层窗口，则 parent 等于 top（都等于 window）。
- 最上层的 window如果不是通过 window.open()打开的，那么其 name 属性就不会包含值，
- 还有一个 self 对象，它是终极 window 属性，始终会指向 window。实际上，self 和 window 就是同一个对象。之所以还要暴露 self，就是为了和 top、parent 保持一致。
- 这些属性都是 window 对象的属性，因此访问 window.parent、window.top 和 window.self都可以。这意味着可以把访问多个窗口的 window 对象串联起来，比如 window.parent.parent。

##### 12.1.3  窗口位置与像素比

- window. screenLeft ()：表示窗口相对于屏幕左侧的位置 ，返回值的单位是 CSS 像素。

- window. screenTop ()：表示窗口相对于屏幕顶部的位置 ，返回值的单位是 CSS 像素。

- window.moveTo(x,y)：表示窗口移动到的新位置。

- window.moveBy(x,y)：表示窗口相对当前位置在两个方向上移动的像素数。

- window.devicePixelRatio ：像素比，表示物理像素与逻辑像素之间的缩放系数。

- > 依浏览器而定，以上方法可能会被部分或全部禁用。

##### 12.1.4  窗口大小

- innerWidth和 innerHeight ：返回浏览器窗口中页面视口的大小（不包含浏览器边框和工具栏）。
- outerWidth 和 outerHeight： 返回浏览器窗口自身的大小（不管是在最外层 window 上使用，还是在窗格<frame>中使用）。
- resizeTo(x,y)：调整窗口大小，接收新的宽度和高度值。只能应用到最上层的 window 对象。
- resizeBy(x,y)：调整窗口大小，接收宽度和高度各要缩放多少。只能应用到最上层的 window 对象。

- 浏览器窗口自身的精确尺寸不好确定，但可以确定页面视口的大小，如下所示：

```javascript
let pageWidth = window.innerWidth, 
    pageHeight = window.innerHeight; 
//检查 pageWidth 是不是一个数值
if (typeof pageWidth != "number") { 
    //则通过 document.compatMode来检查页面是否处于标准模式
    if (document.compatMode == "CSS1Compat"){ 
        pageWidth = document.documentElement.clientWidth; 
        pageHeight = document.documentElement.clientHeight; 
    } else { 
        pageWidth = document.body.clientWidth; 
        pageHeight = document.body.clientHeight; 
    } 
} 
```

> 在移动设备上，window.innerWidth 和 window.innerHeight 返回视口的大小，也就是屏幕上页面可视区域的大小。document.documentElement.clientWidth 和 document.documentElement. clientHeight 返回的布局视口的大小，即渲染页面的实际大小。布局视口是相对于可见视口的概念，可见视口只能显示整个页面的一小部分。Mobile Internet Explorer 把布局视口的信息保存在document.body.clientWidth 和 document.body.clientHeight 中。在放大或缩小页面时，这些值也会相应变化。

##### 12.1.5  视口位置

- window.pageXoffset/window. scrollX：返回文档/页面水平方向滚动的像素值。
- window.pageYoffset/window.scrollY：返回文档在垂直方向已滚动的像素值。

- window.scroll(x-coord, y-coord)/window.scroll(options)：滚动窗口至文档中的特定位置。

- window.scrollBy(x-coord, y-coord)/window.scrollBy(options)：在窗口中按指定的偏移量滚动文档。

- window.scrollTo(x-coord,y-coord)/window.scrollTo(options)：滚动到文档中的某个坐标。

```javascript
window.scroll({
  top: 100,
  left: 100,
  behavior: "smooth",
});

//向下滚动一页
window.scrollBy(0, window.innerHeight);
//向上滚动一页
window.scrollBy(0, -window.innerHeight);

//使用 options
window.scrollBy({
  top: 100,
  left: 100,
  behavior: "smooth",
});

window.scrollTo( 0, 1000 );

// 设置滚动行为改为平滑的滚动
window.scrollTo({
    top: 1000,
    behavior: "smooth"  //behavior表示滚动行为，支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值 auto
});
```

##### 12.1.6  导航与打开新窗口

- window.open(url, target, windowFeatures,bool)

- url：可选，表示要加载的资源的 URL 或路径。留空或省略此参数，则会在目标浏览上下文中打开一个空白页。

- target：可选，用于指定加载资源的浏览上下文的名称。如果该名称无法识别现有的上下文，则会创建一个新的上下文，并赋予指定的名称。还可以使用特殊的 target 关键字：_self、_blank、_parent 和 _top。该名称可用作 <a> 或 <form> 元素的 target 属性。

- windowFeatures：可选 一个字符串，包含以逗号分隔的窗口特性列表，形式为 name=value，布尔特性则仅为 name。这些特性包括窗口的默认大小和位置、是否打开最小弹出窗口等选项。支持以下选项：

- width 或 innerWidth：指定内容区域（包括滚动条）的宽度。最小要求值为 100。

- height 或 innerHeight：指定内容区域（包括滚动条）的高度。最小要求值为 100。

- left 或 screenX：指定从用户操作系统定义的工作区左侧到新窗口生成位置的距离（以像素为单位）。

- top 或 screenY：指定从用户操作系统定义的工作区顶部到新窗口生成位置的距离（以像素为单位）。

- noopener：如果设置了此特性，新窗口将无法通过 Window.opener 访问原窗口，并返回 null。

- noreferrer：如果设置了此特性，浏览器将省略 Referer 标头，并将 noopener 设为 true。

- popup：如果启用此特性，则要求使用最小弹出窗口。弹出窗口中包含的用户界面功能将由浏览器自动决定。

- location： yes或no， 表示是否显示地址栏。不同浏览器的默认值也不一样。

- fullscreen： yes或no， 表示新窗口是否最大化。仅限 IE 支持

- Menubar： yes或no， 表示是否显示菜单栏。默认为"no"

- resizable： yes或no， 表示是否可以拖动改变新窗口大小。默认为"no"

- scrollbars： yes或no， 表示是否可以在内容过长时滚动。默认为"no"

- status： yes或no， 表示是否显示状态栏。不同浏览器的默认值也不一样

- toolbar： yes或no， 表示是否显示工具栏。默认为"no"

- top： 数值， 新窗口的 y 轴坐标。这个值不能是负值

- bool：表示新窗口在浏览器历史记录中是否替代当前加载页面的布尔值。

```javascript
    let wroxWin = window.open("http://www.wrox.com/", 
     "wroxWindow", 
     "height=400,width=400,top=10,left=10,resizable=yes"); 
    // 缩放
    wroxWin.resizeTo(500, 500); 
    // 移动
    wroxWin.moveTo(100, 100);
    wroxWin.close();
    ```

- **opener**

新创建窗口的 window 对象有一个属性 opener，指向打开它的窗口。这个属性只在弹出窗口的最上层 window 对象（top）有定义，是指向调用 window.open()打开它的窗口或窗格的指针。

在某些浏览器中，每个标签页会运行在独立的进程中。在这些浏览器中，可以将新打开的标签页的 opener 属性设置为 null，表示新打开的标签页可以运行在独立的进程中。

```javascript
  let wroxWin = window.open("http://www.wrox.com/",  "wroxWindow",  "height=400,width=400,top=10,left=10,resizable=yes"); 
  
  alert(wroxWin.opener === window); // true
  
  wroxWin.opener = null;
  ```

- 弹窗屏蔽程序

```javascript
  //检查弹窗是否被屏蔽 无论弹窗是用什么方法屏蔽的，以下代码都可以准确判断调用 window.open()的弹窗是否被屏蔽了
  let blocked = false;
  try { 
      let wroxWin = window.open("http://www.wrox.com", "_blank"); 
      if (wroxWin == null){
          blocked = true; 
      } 
  } catch (ex){ 
      blocked = true; 
  } 
  if (blocked){ 
      alert("The popup was blocked!"); 
  }
  ```

##### 12.1.7  定时器

- setTimeout()：用于指定在一定时间后执行某些代码。调用时，会返回一个表示该超时排期的数值 ID，是被排期执行代码的唯一标识符，可用于取消该任务。

- clearTimeout()：取消等待中的排期任务。只要是在指定时间到达之前调用 clearTimeout()，就可以取消超时任务。在任务执行后再调用clearTimeout()没有效果。

```javascript
  // 设置超时任务
  let timeoutId = setTimeout(() => alert("Hello world!"), 1000); 
  // 取消超时任务
  clearTimeout(timeoutId);
  ```

- setInterval()：用于指定每隔一段时间执行某些代码。会返回一个循环定时 ID，可以用于在未来某个时间点上取消循环定时。

- clearInterval()：取消循环定时。

```javascript
  let num = 0, intervalId = null; 
  let max = 10; 
  let incrementNumber = function() { 
      num++; 
      if (num == max) { 
          clearInterval(intervalId); 
          alert("Done"); 
      } 
  } 
  intervalId = setInterval(incrementNumber, 500);
  ```

> 注意在使用 setTimeout()时，不一定要记录超时 ID，因为它会在条件满足时自动停止，否则会自动设置另一个超时任务。这个模式是设置循环任务的推荐做法。setIntervale()在实践中很少会在生产环境下使用，因为一个任务结束和下一个任务开始之间的时间间隔是无法保证的，有些循环定时任务可能会因此而被跳过。而像前面这个例子中一样使用 setTimeout()则能确保不会出现这种情况。一般来说，最好不要使用 setInterval()。

##### 12.1.8  系统对话框

- alert()：弹出警告框，对话框只有一个“OK”（确定）按钮。用户唯一的选择就是在看到警告框之后把它关闭。
- confirm()：弹出确认框，确认框有两个按钮：“Cancel”（取消）和“OK”（确定）。
- prompt()：弹出输入框，除了 OK 和 Cancel 按钮，提示框还会显示一个文本框，让用户输入内容。

- window.print()： 显示打印对话框，异步显示的，即控制权会立即返回给脚本。
- window.find()：显示查找对话框，异步显示的，即控制权会立即返回给脚本。

```javascript
if (confirm("Are you sure?")) { 
    alert("I'm so glad you're sure!"); 
} else { 
    alert("I'm sorry to hear you're not sure."); 
}

let result = prompt("What is your name? ", ""); 
if (result !== null) { 
    alert("Welcome, " + result); 
}
```

### 12.2　location对象 372

| 属 性             | 值                                              | 说 明                                                        |
| ----------------- | ----------------------------------------------- | ------------------------------------------------------------ |
| location.hash     | "#contents"                                     | URL 散列值（井号后跟零或多个字符），如果没有则为空字符串     |
| location.host     | "www.wrox.com:80"                               | 服务器名及端口号                                             |
| location.hostname | "www.wrox.com"                                  | 服务器名                                                     |
| location.href     | "http://www.wrox.com:80/WileyCDA/?q=js#contents | 当前加载页面的完整 URL。location 的 toString()方法返回这个值 |
| location.pathname | "/WileyCDA/"                                    | URL 中的路径和（或）文件名                                   |
| location.port     | "80"                                            | 请求的端口。如果 URL中没有端口，则返回空字符串               |
| location.protocol | "http:"                                         | 页面使用的协议。通常是"http:"或"https:"                      |
| location.search   | "?q=javascript"                                 | URL 的查询字符串。这个字符串以问号开头                       |
| location.username | "foouser"                                       | 域名前指定的用户名                                           |
| location.password | "barpassword"                                   | 域名前指定的密码                                             |
| location.origin   | "http://www.wrox.com"                           | URL 的源地址。只读                                           |

##### 12.2.1 查询字符串

location.search 返回了从问号开始直到 URL 末尾的所有内容，但没有办法逐个访问每个查询参数。下面的函数解析了查询字符串，并返回一个以每个查询参数为属性的对象：

```javascript
let getQueryStringArgs = function() { 
    // 取得没有开头问号的查询字符串
    let qs = (location.search.length > 0 ? location.search.substring(1) : ""), 
        // 保存数据的对象
        args = {}; 
    // 把每个参数添加到 args 对象
    for (let item of qs.split("&").map(kv => kv.split("="))) { 
        let name = decodeURIComponent(item[0]), 
            value = decodeURIComponent(item[1]); 
        if (name.length) { 
            args[name] = value; 
        } 
    }
    return args; 
}

// 假设查询字符串为?q=javascript&num=10 
let args = getQueryStringArgs(); 
alert(args["q"]); // "javascript" 
alert(args["num"]); // "10"
```

##### 12.2.2 **URLSearchParams**

URLSearchParams 提供了一组标准 API 方法，通过它们可以检查和修改查询字符串。给URLSearchParams 构造函数传入一个查询字符串，就可以创建一个实例。大多数支持 URLSearchParams 的浏览器也支持将 URLSearchParams 的实例用作可迭代对象。

```javascript
et qs = "?q=javascript&num=10"; 
let searchParams = new URLSearchParams(qs);

alert(searchParams.toString()); // " q=javascript&num=10" 
searchParams.has("num"); // true 
searchParams.get("num"); // 10

searchParams.set("page", "3"); 
alert(searchParams.toString()); // " q=javascript&num=10&page=3"

searchParams.delete("q"); 
alert(searchParams.toString()); // " num=10&page=3"

for (let param of searchParams) { 
    console.log(param); 
} 
// ["q", "javascript"] 
// ["num", "10"]
```

##### 12.2.3 操作方法

```javascript
//修改浏览器的地址,最常见的使用 assign()方法并传入一个 URL，这会立即启动导航到新URL，同时在浏览器历史记录中增加一条记录
location.assign("http://www.wrox.com");

//下面两行代码都会执行与显式调用 assign()一样的操作
window.location = "http://www.wrox.com"; 
location.href = "http://www.wrox.com";

//调用 replace()之后，用户不能回到前一页。
location.replace("http://www.wrox.com/")

//重新加载当前显示的页面
location.reload(); // 重新加载，可能是从缓存加载
location.reload(true); // 重新加载，从服务器加载
```

### 12.3　navigator对象 375

> navigator 是由 Netscape Navigator 2 最早引入浏览器的，现在已经成为客户端标识浏览器的标准。只要浏览器启用 JavaScript，navigator 对象就一定存在。但是与其他 BOM 对象一样，每个浏览器都支持自己的属性。navigator 对象的属性通常用于确定浏览器的类型

##### 12.3.1 检测插件

> 检测浏览器是否安装了某个插件是开发中常见的需求。除 IE10 及更低版本外的浏览器，都可以通过 plugins 数组来确定。

```javascript
//这个方法可以在Firefox、Safari、Opera 和 Chrome 中检测插件。
let hasPlugin = function(name) { 
    name = name.toLowerCase();
    for (let plugin of window.navigator.plugins){ 
        if (plugin.name.toLowerCase().indexOf(name) > -1){ 
            return true; 
        } 
    } 
    return false; 
}

// 检测 Flash 
alert(hasPlugin("Flash"));

// 检测 QuickTime 
alert(hasPlugin("QuickTime"));
```

##### 12.3.2 注册处理程序

>现代浏览器支持 navigator 上的（在 HTML5 中定义的）registerProtocolHandler()方法。这个方法可以把一个网站注册为处理某种特定类型信息应用程序。随着在线 RSS 阅读器和电子邮件客户端的流行，可以借助这个方法将 Web 应用程序注册为像桌面软件一样的默认应用程序。

### 12.4　screen对象 379

>window 的另一个属性 screen 对象，是为数不多的几个在编程中很少用的 JavaScript 对象。这个对象中保存的纯粹是客户端能力信息，也就是浏览器窗口外面的客户端显示器的信息，比如像素宽度和像素高度。每个浏览器都会在 screen 对象上暴露不同的属性。

```javascript
availHeight  屏幕像素高度减去系统组件高度（只读）
availLeft    没有被系统组件占用的屏幕的最左侧像素（只读）
availTop     没有被系统组件占用的屏幕的最顶端像素（只读）
availWidth   屏幕像素宽度减去系统组件宽度（只读）
colorDepth   表示屏幕颜色的位数；多数系统是 32（只读）
height       屏幕像素高度
left         当前屏幕左边的像素距离
pixelDepth   屏幕的位深（只读）
top          当前屏幕顶端的像素距离
width        屏幕像素宽度
orientation  返回 Screen Orientation API 中屏幕的朝向
```

### 12.5　history对象 379

##### 12.5.1 导航

```javascript
// 后退一页
history.go(-1); 
history.back();

// 前进一页
history.go(1); 
history.forward();

// 前进两页
history.go(2);

// 导航到最近的 wrox.com 页面
history.go("wrox.com");

// 导航到最近的 nczonline.net 页面
history.go("nczonline.net");
```

##### 12.5.2 历史状态管理

> 现代 Web 应用程序开发中最难的环节之一就是历史记录管理。用户每次点击都会触发页面刷新的时代早已过去，“后退”和“前进”按钮对用户来说就代表“帮我切换一个状态”的历史也就随之结束了。为解决这个问题，首先出现的是 hashchange 事件。HTML5 也为history 对象增加了方便的状态管理特性。

顶部

JavaScript高级程序设计(4)

目录

相关推荐