JavaScript高级程序设计（第3版）学习笔记 第8章

第8章 BOM

1.BOM 的核心对象是 window，它表示浏览器的一个实例。在浏览器中，window 对象有双重角色， 既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象，所有在全局作用域中声明的变量、函数都会变成 window 对象的属性和方法。
全局变量不能通过 delete 操作符删除，而直接在 window 对象上的定义的属性可以

var age = 29;
window.color = "red";
//在IE < 9 时抛出错误，在其他所有浏览器中都返回false 
delete window.age;

//在IE < 9 时抛出错误，在其他所有浏览器中都返回true 
delete window.color; //returns true

alert(window.age);   //29
alert(window.color); //undefined

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

• top 对象始终指向最高(最外)层的框架，也就是浏览器窗口。
• parent(父)对象始终指向当前框架的 直接上层框架。
• self对象始终指向 window。

3.window 对象位置的属性：

• screenLeft 和 screenTop：表示窗口相对于屏幕左边和上边的位置。（IE、Safari、Opera 和 Chrome ）
• screenX 和 screenY：表示窗口相对于屏幕左边和上边的位置。（Safari 和 Chrome ）

• //跨浏览器取得窗口左边和上边的位置（无法取得窗口左边和上边的精确坐标值）
  var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
  var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;

window 对象位置的方法：

• moveTo()：接收两个参数，新位置的 x 和 y 坐标值。
• moveBy()：接收两个参数，在水平和垂直方向上移动的像素数。

• //不适用于框架，只能对最外层的 window 对象使用
  window.moveTo(0,0);//将窗口移动到屏幕左上角 
  window.moveBy(0,100);//将窗向下移动 100 像素 
  window.moveTo(200,300);//将窗口移动到(200,300) 
  window.moveBy(-50,0);//将窗口向左移动 50 像素 

4.跨浏览器取得页面视口的大小：

var pageWidth = window.innerWidth,
    pageHeight = window.innerHeight;
    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()：接收新窗口与原窗口的宽度和高度之差。

• //不适用于框架，而只能对最外层的 window 对象使用。
  window.resizeTo(100, 100);  //调整到 100×100 
  
  window.resizeBy(100, 50);  //调整到 200×150 
  
  window.resizeTo(300, 300); //调整到 300×300 

5.window.open()方法：导航到一个特定的 URL或者打开一个新的浏览器窗口，会返回一个指向新窗口的引用，由此可以在某些浏览器默认情况下不允许对主浏览器窗口调整的情况下调整窗口大小或移动位置。

接收 4 个参数：

• 要加载的 URL
• 窗口目标：如果该参数是已有窗口或框架的名称，那么就会在具有该名称的窗口或框架中加载第一个参数指定的 URL，还可以是下列任何一个特殊的窗口名称:_self、_parent、_top 或_blank。
• 一个特性字符串：一个逗号分隔的设置字符串，表示在新窗口中都显示哪些特性。
  如果没有传入第三个参数，那么就会打开一个带有全部默认设置(工具栏、地址栏和状态栏等)的新浏览器窗口(或者打开一个新标签页— —根据浏览器设置)。
  在不打开新窗口的情况下，会忽略第三个参数。

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

• 一个表示新页面是否取代浏览 器历史记录中当前加载页面的布尔值

6.调用 close()方法还可以关闭新打开的窗口。

//仅适用于通过 window.open()打开的弹出窗口。
wroxWin.close();

7.准确地检测出弹出窗口是否被屏蔽

var blocked = false;

try {
        var wroxWin = window.open("http://www.wrox.com", "_blank");
        if (wroxWin == null){
            //如果是浏览器内置的屏蔽程序阻止的弹出窗口，那么 window.open()很可能会返回 null
            blocked = true;
        }
} catch (ex){
    //如果是浏览器扩展或其他程序阻止的弹出窗口，那么 window.open()通常会抛出一个错误
    blocked = true;
}

if (blocked){
    alert("The popup was blocked!");
}

8.setTimeout()方法：超时调用，接受两个参数:要执行的代码（可以是一个包含 JavaScript 代码的字符串(就和在 eval()函数中使用的字符串一样)，也可以是一个函数）和以毫秒表示的时间(即在执行代码前需要等待多少毫秒)。结果返回一个数值 ID，表示超时调用。这个超时调用 ID 是计划执 行代码的唯一标识符，可以通过它来取消超时调用。
JavaScript 是一个单线程序的解释器，因此一定时间内只能执行一段代码。为了控制要执行的代码，就有一个 JavaScript 任务队列。这些任务会按照将它们添加到队列的顺序执行。setTimeout()的第二个参数告诉 JavaScript 再过多长时间把当前任务添加到队列中。如果队列是空的，那么添加的代码会立即执行;如果队列不是空的，那么它就要等前面的代码执行完了以后再执行。

//设置超时调用
var timeoutId = setTimeout(function() {
    alert("Hello world!");
}, 1000);

//注意:把它取消 
clearTimeout(timeoutId);

9.setInterval()：接受两个参数：要执行的代码(字符串或函数)和每次执行之前需要等待的毫秒数。返回一个间歇调用 ID，该 ID 可用于在将来某个时刻取消间歇调用。要取消尚未执行的间歇调用，可以使用 clearInterval()方法并传入相应的间歇调用 ID。

//变量 num 每半秒钟递增一次，当递增到最大值时就会取消先前设定的间歇调用。
var num = 0;
var max = 10;
var intervalId = null;
function incrementNumber() {
    num++;
    //如果执行次数达到了 max 设定的值，则取消后续尚未执行的调用 
    if (num == max) {
        clearInterval(intervalId);
        alert("Done");
    }
}
intervalId = setInterval(incrementNumber, 500);

10.浏览器通过 alert()、confirm()和 prompt()方法可以调用系统对话框向用户显示消息。系统对话框观由操作系统及(或)浏览器设置决定。

• alert()方法：接受一个字符串并将其显示给用户。
• confirm()方法：接受一个字符串并将其显示给用户，检查 confirm()方法返回的布尔值:true 表示单击了 OK，false 表示单击了 Cancel 或单击了右上角的 X 按钮。

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

• prompt()方法：接受两个参数:要显示给用户的文本提示和文本输入域的默认值(可以是一个空字符串)。

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

 

11.location 是最有用的 BOM 对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一 些导航功能。window.location 和 document.location 引用的是同一个对象。它可以将 URL 解析为独立的片段，让开发人员可以通过不同的属性访问这些片段，location 对象的所有属性如下：

• hash ：URL中的hash(#号后跟零或多个字符)
• host：服务器名称和端口号
• hostname：不带端口号的服务器名称
• href：当前加载页面的完整URL。location对象的 toString()方法也返回这个值
• pathname ：URL中的目录和(或)文件名
• port：返回URL中指定的端口号。
• protocol：页面使用的协议。通常是http:或https:
• search：URL的查询字符串。这个字符串以问号开头

 

12.创建一个函数，用以解析查询字符串，然后返回包含所有参数的一个对象:
location.search 返回从问号到 URL 末尾的所有内容，但却没有办法逐个访问其中的每个查询字符串参数

function getQueryStringArgs(){
    //取得查询字符串并去掉开头的问号
    var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
    //保存数据的对象 
    args = {},
    //取得每一项
    items = qs.length ? qs.split("&") : [], 
    item = null,
    name = null,
    value = null,
    //在 for 循环中使用
    i = 0,
    len = items.length;
    //逐个将每一项添加到 args 对象中 
    for (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;
}

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

13.使用 location 对象可以通过很多方式来改变浏览器的位置：最常用的是设置 location.href 属性

• 使用assign()方法为其传递一个 URL（将 location.href 或 window.location 设置为一个 URL 值，也会以该值调用 assign()方法）

• location.assign("http://www.wrox.com");

• 修改 location 的属性，使用这种方式浏览器的历史记录中就会生成一条新记录，通过单击“后退”按钮都会导航到前一个页面。
  每次修改 location 的属性(hash 除外)，页面都会以新 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.yahoo.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;

• replace()方法，接受一个参数，即要导航到的 URL，同时该 URL 会替换浏览器历史记录中当前显示的页面，也就是用户不能回到前一个页面。

14.reload()方法：重新加载当前显示的页面，最好放在代码的最后一行。

location.reload(); //不传递任何参数，页面就会以最有效的方式重新加载(有可能从缓存中加载)
location.reload(true); //强制从服务器重新加载

15.navigator 对象提供了与浏览器有关的信息，通常用于检测显示网页的浏览器类型。

16.检测浏览器中是否安装了特定的插件是一种最常见的检测例程。

对于非 IE 浏览器，使用 plugins 数组来达到目的。该数组中的每一项都包含下列属性：

• name:插件的名字。
• description:插件的描述。
• filename:插件的文件名。
• length:插件所处理的 MIME 类型数量。

//检测插件(在 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 
alert(hasPlugin("Flash"));

对于非 IE 浏览器，使用专有的 ActiveXObject 类型，并尝试创建一个特定插件的实例。

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

鉴于检测这两种插件的方法差别太大，因此典型的做法是针对每个插件分别创建检测函数

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

//检测 Flash 
alert(hasFlash());

17.screen 对象用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等，一般只用于站点分析。

18.history 对象保存着用户上网的历史记录（当页面的 URL 改变时，就会生成一条历史记录），从窗口被打开的那一刻算起，每个浏览器窗口、每个标签页乃至每个框架，都有自己的 history 对象与特定的 window 对象关联：

• length 属性：保存着历史记录的数量
• go()方法：可以在用户的历史记录中任意跳转

• history.go(-1);//后退一页 
  history.go(2);//前进两页 
  history.go("wrox.com");//跳转到最近的wrox.com 页面

• back()方法：

• history.back();//后退一页

• forward()方法：

• history.forward();//前进一页