JavaScript学习笔记（三十三）BOM（二）

location对象

• location对象提供了当前窗口中加载文档的信息，以及通常的导航功能。
• 它既是window的属性，也是document的属性。
• location对象不仅保存着当前加载文档的信息，也保存着把URL解析为离散片段后能够通过属性访问的信息。

假设当前浏览器加载的URL是：http://foouser:barpassword@www.wrox.com:80/WileyCDA/?q= javascript#contents

location对象的内容如下：

查询字符串

• 虽然location.search 返回了从问号开始直到URL末尾的所有内容，但没有办法逐个访问每个查询参数。

/*
这个函数首先删除了查询字符串开头的问号，当然前提是location.search必须有内容。解析后的参数将被保存到args对象，这个对象以字面量形式创建。接着，先把查询字符串按照s分割成数组，每个元素的形式为name=value。for循环迭代这个数组，将每一个元素按照=分割成数组，这个数组第一项是参数名，第二项是参数值。参数名和参数值在使用decodeURIComponent ()解码后（这是因为查询字符串通常是被编码后的格式)分别保存在name和value变量中。最后，name作为属性而value作为该属性的值被添加到args对象。
*/
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; 
} 

• URLSearchParams提供了一组标准API方法,通过它们可以检查和修改查询字符串。
• 实例上暴露了get()、set()、delete()等方法。

let 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"

操作地址

• 通过修改location对象可以修改浏览器的地址。
• assign()方法传入一个URL。

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

• 修改location对象的属性也会修改当前加载的页面。

// 假设当前 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.somewhere.com/WileyCDA/ 
location.hostname = "www.somewhere.com"; 
// 把 URL 修改为 http://www.somewhere.com/mydir/ 
location.pathname = "mydir"; 
// 把 URL 修改为 http://www.somewhere.com:8080/WileyCDA/ 
location.port = 8080; 

• 以上所有方法都会在浏览器的历史记录中增加相应的记录。* 如果不希望增加历史记录，可以使用replace()方法。
  • 这个方法接收一个URL参数。
  • 重新加载页面后不会增加历史记录，并且用户不能回到前一页。
• reload()方法也可以修改地址，作用是重新加载当前显示的页面。
  • 不传参数页面会以最有效的方式重新加载。

location.reload(); // 重新加载，可能是从缓存加载
location.reload(true); // 重新加载，从服务器加载

navigator对象

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

• navigator对象的属性通常用于确定浏览器的类型。

检测插件

• 除IE10及更低版本外的浏览器，都可以通过plugins数组来确定。这个数组中的每一项都包含如下属性。
  • name：插件名称。
  • description：插件介绍。
  • filename：插件的文件名。
  • length：由当前插件处理的MIME类型数量。

// 插件检测，IE10 及更低版本无效 
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"));

注册处理程序

• 使用registerProtocolHandler()方法可以把一个网站注册为处理某种特定类型信息应用程序。
• 必须传入3个参数：
  • 要处理的协议；如：mailto或ftp
  • 处理该协议的URL；
  • 应用名称。

把一个Web应用程序注册为默认邮件客户端：

/*
这个例子为"mailto"协议注册了一个处理程序，这样邮件地址就可以通过指定的Web应用程序打开。注意,第二个参数是负责处理请求的URL，%s表示原始的请求。
*/
navigator.registerProtocolHandler("mailto", 
 "http://www.somemailclient.com?cmd=%s", 
 "Some Mail Client"); 

screen对象

• 该对象中保存的纯粹是客户端能力信息，也就是浏览器窗口外面的客户端显示器的信息。
• screen对象上暴露的属性如下：

history对象

• 表示当前窗口首次使用以来用户的导航历史记录。
• history是window的属性。

导航

• go()方法可以在用户历史记录中沿任何方向导航，可以前进也可以后退。
• 只接收一个参数：
  • 可以是一个整数：表示前进后退多少步；
  • 负值：表示在历史记录中后退；
  • 正值：表示在历史记录中前进；

// 后退一页
history.go(-1); 
// 前进一页
history.go(1); 
// 前进两页
history.go(2);

• go()方法可以简写为：back()和forward()。

// 后退一页
history.back(); 
// 前进一页
history.forward(); 

历史状态管理

• hashchange会在页面URL的散列变化时被触发，开发者可以在此时执行某些操作。
• 状态管理API则可以让开发者改变浏览器URL而不会加载新页面。
• history.pushState()方法接收3个参数：
  • state对象；
  • 新状态的标题；
  • (可选的)相对URL。
• pushstate()方法执行后，状态信息就会被推到历史记录中,浏览器地址栏也会改变以反映新的相对URL。