《JavaScript高级程序设计》（第3版）读书笔记第8章 BOM

时间 2019-12-07

标签 javascript 高级程序设计读书笔记 bom 栏目 JavaScript 繁體版

原文原文链接

ECMAScript是JavaScript的核心，但若是要在Web中使用JavaScript，那么BOM（浏览器对象模型）则无疑才是真正的核心。
W3C为了把浏览器中JavaScript最基本的部分标准化，已经将BOM的主要方面归入了HTML5规范中

`window`对象

BOM 的核心对是window，它表示浏览器的一个实例。在浏览器中window对象既是经过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象，所以有权访问parseInt()等方法

全局做用域

全部在全局做用域中声明的变量、函数都会变成window对象的属性和方法。
定义全局变量与直接在window对象上定义属性仍是有一点差异：全局变量不能经过delete操做符删除，而直接定义在window对象上的属性能够

var age = 29;
window.color = "red";

// 在IE < 9 时抛出错误，在其余浏览器里返回 false
delete window.age;

// 在IE < 9 时抛出错误，在其余浏览器里返回 true
delete window.color;

console.log(window.age);       // 29
console.log(window.color);     // undefined

全局环境下使用var语句添加的window属性有一个名为[[Configruable]]的特性，这个特性的值被设置为false，所以不可经过delete删除。IE8及更早版本在遇到使用delete删除window属性的语句时，无论该属性最初如何建立的，都会抛出错误，以示警告。
尝试访问未声明的属性会抛出错误，可是经过查询window对象，能够知道某个可能未声明的变量是否存在

// 这里会抛出错误 oldValue 未定义
var newValue = oldValue;

// 这里不会抛出错误，由于这是一次属性查询
// newValue的值是 undefined
var newValue = window.oldValue;

窗口关系及框架

若是页面中包含框架，则每一个框架都拥有本身的window对象，而且保存在frames集合中。
在frames集合中，能够经过数值索引（从0开始，从左至右，从上到下）或者框架名称来访问相应的window对象。每一个window对象都有一个name属性，其中包含框架的名称。

<html>
  <head>
    <title> Frameset Example</title>
  </head>
  <frameset rows="160, *">
    <frame src="frame.htm" name="topFrame">
    <frameset cols="50%, 50%">
      <frame src="anotherframe.htm" name="leftFrame">
      <frame src="yetanotherframe.htm" name="rightFrame">
    </frameset>
  </frameset>
</html>

能够经过window.frames[0]或者window.frames["topFrame"]来引用上方的框架，不过最好使用top而非window。例如 top.frames[0]
top对象始终指向最高（最外层）的框架，也就是浏览器窗口。
与top相对的另外一个window对象是parent。parent（父）对象始终指向当前框架的直接上层框架。在某些状况下parent有可能等于top,但在没有框架的状况下，parent必定等于top。此时他们都是window

窗口位置

用来肯定和修改window对象位置的属性和方法有不少。javascript
- IE, Safari, Opera, Chrome 都提供了screenLeft 和 screenTop属性，分别用于表示相对屏幕左边和上边的位置。
- Firefox 则在 screenX 和 screenY 属性中提供相同的窗口位置信息， Safari, Chrome也同时支持这两个属性。
- Opera虽然支持 screenX 和 screenY 属性，但与 screenLeft 和 screenTop 并不对应，所以建议你们不要在 Opera中使用。
使用下列代码能够跨浏览器取得窗口左边和上边的位置

// 肯定 screenLeft 和 screenTop 属性是否存在
// 存在，是在 IE, Safari, Opera, Chrome
// 不然，是在 Firefox中
var leftPos = (typeof window.screenLeft == "number") ?
                window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ?
                window.screenTop : window.screenY;

在IE Opera 中，返回的是页面到屏幕边缘的距离（不包括浏览器的工具栏等），而 Chrome Firefox Safari 返回的是浏览器到屏幕边缘的距离（包括浏览器的工具栏等）。
更让人抓狂的是， Firefox Safari Chrome 始终返回页面中每一个框架的 top.screenX top.screenY 值。即便在页面因为被设置了外边距发生偏移的状况下，相对于window对象使用top.screenX top.screenY每次也都会返回相同的值。而IE Opera则会给出框架相对于屏幕辩解的精确坐标值。
最终结果是没法在跨浏览器的条件下取得窗口左边和上边的精确坐标值。
使用moveTo() 和 moveBy()方法，却是有可能将窗口的精确地移动到一个新位置。这两个方法都接受两个参数

// 将窗口移动到屏幕左上角
window.moveTo(0, 0);

// 将窗口向下移动100像素
window.moveBy(0, 100);

// 将窗口移动到（200， 300）
window.moveTo(200, 300);

// 将窗口向左移动50像素
window.moveBy(-50, 0);

须要注意的是，这两个方法可能会被浏览器禁用；并且在Opera和IE7+中默认就是禁用的。
这两个方法都不适用于框架，只能对最外层的window对象使用。

窗口大小

跨浏览器肯定一个窗口的大小不是一件简单的事情。html
- IE9+ Firefox Safari Opera Chrome 均为此提供了4个属性：innerwidth innerHeight outerWidth outerHeight。
- IE9 Safari Firefox 中 outerWidth outerHeight 返回浏览器窗口自己的尺寸（不管是从最外层的window对象仍是从某个框架访问）。
- Opera中这两个属性的值表示页面视图容器的大小。
- innerwidth innerHeight则表示容器中页面视图区的大小（减去边框宽度）。
- Chrome 中四个值返回的相同，即视口（viewport）大小而非浏览器窗口大小。
下面的代码能够跨浏览器取得视口大小，但最终没法肯定浏览器窗口自己大小

var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;

// document.compatMode 这个属性将在第10章讨论
if (typeof pageWidth != "number") {
  if (document.compatMode == "CSS1Compat") {
    pageWidth = document.documentElement.clientWidth;
    pageHeight = document.documentElement.clientHeight;
  } else {
    pageWidth = document.body.clientWidth;
    pageHeight = document.body.clientHeight;
  }
}

使用 resizeTo() 和 resizeBy() 方法能够调整浏览器窗口的大小。须要注意，这两个方法也可能被浏览器禁用。在Opera和IE7+中默认禁止
这两个方法不适用于框架，只能对最外层的window对象使用

// 调整到 100 x 100
window.resizeTo(100, 100);

// 调整到 200 x 150
window.resizeBy(100, 50);

// 调整到 300 x 300
window.resizeTo(300, 300);

导航和打开窗口

window.open() 方法既能够导航到一个特定的URL，也能够打开一个新的浏览器窗口。接受四个参数：java
- 要加载的URL
- 窗口目标 (窗口或者框架的名字以及特殊窗口名称： _self, _parent, _top, _blank)
- 特性字符串（新窗口的特性设置，逗号分隔）
- 表示新页面是否取代浏览器历史记录中当前加载页面的布尔值

// 等同于 <a href="http://www.wrox.com" target="topFrame"></a>
window.open("http://www.wrox.com", "topFrame");

弹出窗口

若是给window.open()传递的第二个参数并非一个已经存在的窗口或者框架，那么该方法就会根据在第三个参数位置上传入的字符串建立一个新窗口或者新标签。
若是没有传入第三个参数，那么就会打开一个带有所有默认设置（工具栏、地址栏和状态栏等）的新浏览器窗口（或者新标签）。
在不打开新窗口的状况下，会忽略第三个参数。
第三个参数是一个逗号分隔的设置字符串，表示新窗口有哪些特性。

设置	值	说明
fullscreen	yes/no	表示浏览器窗口是否最大化。仅限IE
height	数值	表示新窗口的高度。不能小于100
width	数值	表示新窗口的宽度。不能小于100
left	数值	左坐标，不能是负值
top	数值	上坐标。不能是负值
location	yes/no	表示是否在浏览器窗口中显示地址栏。不一样浏览器的默认值不一样。若是设置为no，地址栏可能会隐藏，也可能会禁用，取决于浏览器
menubar	yes/no	是否显示菜单栏。默认no
resizeable	yes/no	是能够拖动窗口大小。默认值no
scrollbars	yes/no	是否容许滚动。默认no
status	yes/no	是否显示状态栏。默认no
toolbar	yes/no	是否显示工具栏。默认no

window.open()方法会返回一个指向新窗口的引用，大体与其余window对象一致，但咱们能够进行更多操做控制。数组
- 例若有些浏览器针对经过window.open()建立的还口不容许咱们针对朱浏览器窗口调整大小或移动位置，但却容许咱们针对经过window.open()建立的窗口调整大小或移动位置。

var wroxWin = window.open("http://www.wrox.com", "wroxWindow",
            "height=400,width=400,top=10,left=10,resizable=yes");

// 新建立的window对象有一个opener属性
// 保存打开它的原始窗口对象
// 而原始窗口不跟踪打开的新窗口，没有指向新窗口对象的属性
console.log(wroxWin.opener == window); // true

// 调整大小
wroxWin.resizeTo(500, 500);

// 移动位置
wroxWin.moveTo(100, 100);

// 关闭新打开的窗口
// 这个方法仅限于经过 window.open() 打开的弹出窗口
// 对于主窗口若是没有获得用于的容许是不能关闭它的。
wroxWin.close();

// 弹窗关闭后，窗口的引用仍然还在
// 但除了检测其closed属性没有其余用处
console.log(wroxWin.closed);    // true

有些浏览器（如IE8 和 Chrome）会在独立的进程运行每个标签页。当一个标签打开另外一个标签页时，若是两个window对象之间须要彼此通讯，那么新标签就不能运行在独立的进程中。
在Chrome中新建的标签页opener属性设置为null，即表示在单独的进程中运行新标签

var wroxWin = window.open("http://www.wrox.com", "wroxWindow",
            "height=400,width=400,top=10,left=10,resizable=yes");

wroxWin.opener = null;

安全限制

目前大部分浏览器都不能经过第四个参数修改是否显示状态栏，不容许弹窗到屏幕意外，不容许关闭地址等等，增强弹窗的安全性，以避免用户和系统对话框混淆。
Chrome采起了不一样的处理方式，它不会像其余浏览器那样简单的屏蔽这些弹窗，而是只是显示它们的标题栏，并放在窗口右下角。

弹出窗口屏蔽程序

大部分浏览器或者浏览器插件都会屏蔽弹窗，此时window.open()极可能返回null。此时只要检查这个返回值就能够肯定弹窗是否被屏蔽。

var wroxWin = window.open("http://www.wrox.com", "_blank");
if (wroxWin == null) {
  console.log("The popup was blocked!");
}

浏览器拓展程序（插件）或其余程序阻止弹窗，那么 window.open()一般会抛出错误。所以不但要检测返回值，还要将对 window.open()的调用封装在一个 try-catch 块中

var bloacked = false;

try {
  var wroxWin = window.open("http://www.wrox.com", "_blank");
  if (wroxWin == null) {
    bloacked = true;
  }
} catch (ex) {
  bloacked = true;
}

if (blocked) {
  console.log("The popup was blocked!");
}

间歇调用和超时调用

JavaScript是单线程语言，但它容许经过设置超时值和间歇值来调度代码在特定的时刻执行。

// 第一个参数传递字符串，不推荐！
setTimeout('alert("Hello World!");', 1000);

// 推荐的方式
setTimeout(() => {
  alert("Hello World!");
}, 1000);

JavaScript是一个单线程解释器，所以必定时间内只能执行一段代码。为了控制要执行的代码，就有一个JavaScript任务队列。这些任务会按照将他们添加到队列中的顺序执行。
第二个参数是告诉JavaScript再过多久把当前任务添加到队列中。以后若是队列是空的，那么添加的代码会当即执行，若是不是空的，那么就要等前面的代码执行完了之后再执行。
该方法会返回一个数值ID，这是计划执行代码的惟一标识符，能够经过它来取消超时调用。

var timeoutId = setTimeout(() => {
  alert("Hello World!");
}, 1000);

// 取消执行
clearTimeout(timeoutId);

超时调用的代码都是在全局做用域中执行的，所以函数中 this 的值在非严格模式下指向 window ，在严格模式下是 undefined。
setInterval()用法与上述相似

系统对话框

alert(), confirm(), prompt() 方法能够调用系统对话框向用户显示消息。系统对话框与浏览器中显示的网页没有关系，不包含HTML，外观由操做系统和浏览器设置决定。打开对话框都是同步和模态的。也就是说，这些对话显示的时候，代码会中止执行，而关掉这些对话框又会恢复执行。
confim() 返回一个布尔值，表明用户选择"ok"仍是"cancel"
prompt() 返回一个字符串或者null，输入了值并肯定，返回字符串，其余方法关闭返回null
打印、查找对话框 print() find()。没什么卵用

`location`对象

location是最有用的BOM对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供一些导航功能。
location 对象既是window对象的属性，也是document对象的属性；换言之，window.location document.location引用的是同一个对象。

属性名	例子	说明
hash	"#contents"	返回 URL 中的hash（#号后跟零或多个字符），若是URL中不包含散列，则返回空字符串
host	"www.wrox.com:80"	返回服务器名称和端口号（若是有）
hostname	"www.wrox.com"	返回服务器名称不带端口号
href	"http:/www.wrox.com"	返回当前加载页面的完整URL。而location对象的toString()方法也返回这个值
pathname	"/WileyCDA/"	返回URL中的目录或者文件名
port	"www.wrox.com"	返回端口号。若是没有端口号，返回空字符串
protocol	"http:"	返回页面使用的协议。一般是 http: https:
search	"?q=javascript	返回URL查询字符串。这个字符串以问号开头

查询字符串参数

虽然上表的属性能够访问到location对象大多数信息，可是其中访问URL包含查询字符串的属性并不方便。尽管location.search返回从问号到URL末尾的全部内容，但却没有办法逐个访问其中的每一个查询字符串参数。
为此咱们能够建立以下函数

funcction getQueryStringArgs() {

  // 取得查询字符串并去掉开头的问号
  var qs = (location.search.length > 0 ? location.search.substring(1) : "");

  // 保存数据的对象
  var args = {};

  // 取得每一项
  var items = qs.length ? qs.split("&") : [];
  var item = null;
  var name = null;
  var value = null;

  // 在for循环中使用
  var i = 0;
  var len = items.length;

  // 逐个将每一项添加到args对象中
  for (var i = 0; i < len; i++) {
    item = items[i].split("=");
    name = decodeURIComponent(item[0]);
    value = decodeURIComponent(item[1]);

    if (name.length) {
      args[name] = value;
    }
  }

  return args;
}

位置操做

使用location对象能够经过不少方式来改变浏览器的位置。
首先也是最经常使用的方式 assign()方法，并为其传递一个URL。当即打开新的URL并在浏览器的历史记录中生成一条记录。若是是将location.href或window.location设置为一个URL值，也会以该值调用assign()方法。

location.assign("http://www.wrox.com");
window.location = "http://www.wrox.com";
location.href = "http://www.wrox.com";

另外修改location对象的其余属性也能够改变当前加载的页面。下面的例子展现了经过将hash, search, hostname, pathname, prot 属性设置为新值来改变URL

// 假设初始URL为 http://www.wrox.com/WileyCDA/

// 将URL修改成 http://www.wrox.com/wileyCDA/#section1
location.hash = "#section1";

// 将URL修改成 http://www.wrox.com/wileyCDA/?q=javascript
location.search = "?q=javascript";

// 将URL修改成 http://www.wrox.com/wileyCDA/
location.hostname = "www.yahoo.com"

// 将URL修改成 http://www.yahoo.com/mydir/
location.pathname = "mydir"

// 将URL修改成 http://www.yahoo.com:8080/wileyCDA/
location.port = 8080;

每次修改location属性（hash除外），页面都会以新URL从新加载
经过上述任何一种方式修改URL以后，浏览器的历史记录中就会生成一条新纪录，所以用户经过单击“后退”按钮都会导航到前一个页面。要禁用这种行为，可使用replace()方法。这个方法只接受一个参数，即要盗号的URL。虽然结果会致使浏览器位置改变，但不会在历史记录中生成新记录。在调用replace()方法后，用户不能回到前一个页面
在IE8 Firefox 1 Safari 2+ Opera9+ Chrome 中，修改hash的值会在浏览器的历史记录中生成一条记录。在IE早期版本中，hash属性不会再用户单击“后退”和“前进”按钮时被更新，而只会在用户单击包含hash的URL时才会被更新
reload() 做用是从新加载当前页面的显示。若是不传参，页面就会以最有效的方式从新加载。若是页面上次请求一来并无改变过，页面就会从浏览器缓存中从新加载。若是要强制从服务器从新加载，则须要像下面这样为该方法传递参数true
位于reload()调用以后的代码可能会也可能不会执行，这要取决于网络延迟或系统资源等因素。为此最好将reload()放在代码的最后一行

`navigator`对象

每一个浏览器中的navigator对象表现是一致的，也有一套本身的属性

属性或方法	说明	IE	Firefox	Safari/Chrome	Opera
appCodeName	浏览器的名称。一般都是`Mozilla`，即便在非Mozilla浏览器中也是如此	3.0+	1.0+	1.0+	7.0+
appMinorVersion	次版本	4.0+	-	-	9.5+
appName	完整的浏览器名称	3.0+	1.0+	1.0+	7.0+
appVersion	浏览器的版本。通常不与实际的浏览器版本对应	3.0+	1.0+	1.0+	7.0+
buildID	浏览器变异版本	-	2.0+	-	-
cookieEnabled	表示cookie是否启用	4.0+	1.0+	1.0+	7.0+
cpuClass	客户端计算机中使用的cpu类型	4.0+	-	-	-
javaEnabled()	表示当前浏览器中是否启用了java	4.0+	1.0+	1.0+	7.0+
language	浏览器的主语言	-	1.0+	1.0+	7.0+
mineTypes	表示当前浏览中注册的MIME类型数组	4.0+	1.0+	1.0+	7.0+
onLine	表示浏览器是否链接到了因特网	4.0+	1.0+	-	9.5+
oscpu	客户端计算机的操做系统或使用的CPU	-	1.5+	-	-
platform	浏览器所在的系统平台	4.0+	1.0+	1.0+	7.0+
plugins	浏览器中安装的插件信息的数组	4.0+	1.0+	1.0+	7.0+
preference	设置用户的首选项	-	1.5+	-	-
product	产品名称如Gecko	-	1.0+	1.0+	-
productSub	关于产品的次要信息	-	1.0+	1.0+	-
registerContentHandler()	针对特定的MIME类型将一个站点注册为处理程序	-	2.0+	-	-
registerProtocolHandler()	针对特定的协议将一个站点注册为处理程序	-	2.0+	-	-
securityPolicy	已经废弃。安全策略的名称。为了与Netscape Navigator4向后兼容而保留下来	-	1.0+	-	-
systemLanguage	操做系统的语言	4.0+	-	-	-
taintEnabled()	已废弃。表示是否容许变量被修改。为了与Netscape Navigator3向后兼容而保留下来	4.0+	1.0+	-	7.0
userAgent	浏览器的用户代码字符串	3.0+	1.0+	1.0+	7.0+
userLanguage	操做系统的默认语言	4.0+	-	-	7.0+
userProfile	借以访问用户我的信息的对象	4.0+	-	-	-
vendor	浏览器的品牌	-	1.0+	1.0+	-
vendorSub	有关供应商的次要信息	-	1.0+	1.0+	-

检查插件

检测浏览器中是否安装了特定的插件是一种最多见的检测历程。对于非IE浏览器，可使用plugins数组来达到这个目的。该数组中的每一项都包含下列属性。浏览器
- name: 插件名字
- description：插件的描述
- filename：插件的文件名
- length: 插件所处理的MIME类型数量
通常来讲name属性中会包含检测插件必需的全部信息，但有时候也不彻底如此。在检测插件时，须要像下面这样循环代码每一个插件并将插件的name与给定的名字进行比较

// 检测插件（在IE中无效）
function hasPlugin(name) {
  name = name.toLowerCase();
  for (var i=0; i < navigator.plugins.length; i++) {
    if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) {
      return true;
    }
  }
  return false;
}

//  检测flash
console.log(hasPlugin("Flash"));

//  检测QuickTime
console.log(hasPlugin("QuickTime"));

检测IE中的插件比较麻烦，由于IE不支持Netscape式的插件，惟一的方式是使用专用的ActiveXObject类型，并尝试建立一个特定插件的实例。IE是以COM对象的方式实现插件的，而COM对象使用惟一标识符来标识。所以要想检测特定的插件，就必须知道其COM标识符，例如Flash的标识符是ShockwaveFlash.ShockwaveFlash。知道惟一标识符后，就能够编写下面的函数来检测

// 检测IE中的插件
function hasIEPlugin(name) {
  try {
    new ActiveXObject(name);
    return true
  } catch (ex) {
    return false;
  }
}

//  检测flash
console.log(hasIEPlugin("ShockwaveFlash.ShockwaveFlash"));

//  检测QuickTime
console.log(hasIEPlugin("QuickTime.QuickTime"));

鉴于两种方式差异较大，典型的作法是针对每一个插件分别建立检测函数

// 检测全部浏览器中的Flash
function hasFlash() {
  var result = hasPlugin("Flash");
  if (!result) {
    result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
  }
  return result;
}

plugins集合有一个名叫refresh()的方法，用于刷新plugins以反映最新安装的插件。这个方法接收一个参数：表示是否应该从新加载页面的一个布尔值。若是将这个值设为true，则会从新加载包含插件的全部页面；不然只更新plugins集合，不从新加载页面。

注册处理程序

registerContentHandler() 和 registerProtocolHandler() 方法可让一个站点知名它能够处理特定类型的信息。随着RSS阅读器和在线电子邮件程序的信息，注册处理程序就为像使用桌面应用程序同样默认使用这些在线应用程序提供了一种方式。
registerContentHandler()接收三个参数：缓存
- 要处理的MIME类型
- 能够处理的MIME类型的页面的URL
- 应用程序的名称

// 要将一个站点注册为处理RSS源的处理程序
navigator.registerContentHandler("application/rss+xml",
  "http://www.somereader.com?feed=%s", "Some Reader");

registerProtocolHandler() 也是三个参数安全
- 要处理的协议（mailto 或 ftp）
- 处理该协议的页面的URL
- 应用程序的名称

// 要将一个应用程序注册为默认的邮件客户端
navigator.registerProtocolHandler("mailto",
  "http://www.somemailclient.com?cmd=%s", "Some Mail Client");

screen对象

screen对象基本只用来代表客户端的能力，其中包括浏览器窗口外部的显示器信息，如像素宽度和高度等。
用处不大

`history`对象

history对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。由于history是window对象的属性，所以每一个浏览器窗口，每一个标签页，乃至每一个框架都有本身的history对象与特定的window对象关联。
出于安全考虑，开发人员没法得知用户浏览器过的URL。不过借由用户访问过的页面列表，一样能够在不知道实际URL的状况视线后退和前进
使用go()方法能够在用户的历史记录中任意跳转，能够向前向后，接受一个参数整数值或者字符串。

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

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

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

// 传入字符串会跳转到历史记录中包含该字符串的第一个位置
// 若是没有包含的记录，则什么都不作
history.go("wrox.com");

还可使用两个简写方法代替 back() 和 forward()。这两个方法模仿浏览器的“后退”“前进”按钮
history还有一个length属性，保存着历史记录的数量。包括全部的历史记录，即全部向前和向后的记录。对于加载到窗口、标签页或框架中的第一个页面而言，hitosty.length等于0

if (history.length == 0) {
  // 这里应该是用户打开窗口后的第一个页面
  ...
}

《JavaScript高级程序设计》（第3版）读书笔记 第8章 BOM

window对象

全局做用域

窗口关系及框架

窗口位置

窗口大小

导航和打开窗口

弹出窗口

安全限制

弹出窗口屏蔽程序

间歇调用和超时调用

系统对话框

location对象

查询字符串参数

位置操做

navigator对象

检查插件

注册处理程序

screen对象

history对象

《JavaScript高级程序设计》（第3版）读书笔记第8章 BOM

`window`对象

`location`对象

`navigator`对象

`history`对象