JS高程：读书摘要（六）BOM对象

2018-12-29  本文已影响0人  Upcccz

location 对象

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

location对象包含的属性
位置操作

使用location 对象可以通过很多方式来改变浏览器的位置，使用assign()方法并为其传递一个URL。

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

这样，就可以立即打开新URL 并在浏览器的历史记录中生成一条记录。如果是将location.href或window.location 设置为一个URL 值，也会以该值调用assign()方法。

window.location = "http://www.wrox.com";
location.href = "http://www.wrox.com";
// 跟上面是有assign方法效果完全一样
// 最长使用location.href

也可以通过将hash、search、hostname、pathname 和port 属性设置为新值来改变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;

每次修改location 的属性（hash 除外），页面都会以新URL 重新加载。当通过上述任何一种方式修改URL 之后，浏览器的历史记录中就会生成一条新记录，因此用户通过单击“后退”按钮都会导航到前一个页面。要禁用这种行为，可以使用replace()方法。这个方法只接受一个参数，即要导航到的URL；结果虽然会导致浏览器位置改变，但不会在历史记录中生成新记录。在调用replace()方法之后，会取代原页面在历史记录history栈中的位置，所以用户不在能回到前一个页面，只能回到在history栈中排在原页面之前的那个页面。

reload()：作用是重新加载当前显示的页面。如果调用reload()时不传递任何参数，页面就会以最有效的方式重新加载。也就是说，如果页面自上次请求以来并没有改变过，页面就会从浏览器缓存中重新加载。如果要强制从服务器重新加载，则需为该方法传递参数true。

位于reload()调用之后的代码可能会也可能不会执行，这要取决于网络延迟或系统资源等因素。为此，最好将reload()放在代码的最后一行。

navigator 对象

navigator 对象用来识别客户端浏览器的事实标准，navigator 对象是所有支持JavaScript 的浏览器所共有的。与其他BOM 对象的情况一样，每个浏览器中的navigator 对象也都有一套自己的属性和方法。（下列属性和方法不是所有浏览器所有版本都支持）通常用于检测显示网页的浏览器类型。

检测插件

检测浏览器中是否安装了特定的插件是一种最常见的检测例程。对于非IE 浏览器，可以使用plugins数组来达到这个目的。该数组中的每一项都包含下列属性。

一般来说，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
alert(hasPlugin("Flash"));
//检测QuickTime
alert(hasPlugin("QuickTime"));

每个插件对象本身也是一个MimeType 对象(资源的媒体类型)的数组，这些对象可以通过方括号语法来访问。每个MimeType 对象有4 个属性：包含MIME 类型描述的description、回指插件对象的enabledPlugin、表示与MIME 类型对应的文件扩展名的字符串suffixes（以逗号分隔）和表示完整MIME 类型字符串的type。

plugins浏览器插件对象

history 对象

history 对象保存着用户上网的历史记录，history 是window对象的属性，因此每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window 对象关联。出于安全方面的考虑，开发人员无法得知用户浏览过的URL。不过，借由用户访问过的页面列表，同样可以在不知道实际URL的情况下实现后退和前进。
使用go()方法可以在用户的历史记录中任意跳转。也可以给go()方法传递一个字符串参数，此时浏览器会跳转到历史记录中包含该字符串的第一个位置——可能后退，也可能前进。

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

还可以使用两个简写方法back()和forward()来代替go()，这两个方法可以模仿浏览器的“后退”和“前进”按钮。

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

history 对象还有一个length 属性，保存着历史记录的数量。这个数量包括所有历史记录，即所有向后和向前的记录。对于加载到窗口、标签页或框架中的第一个页面而言，history.length 等于0。通过像下面这样测试该属性的值，可以确定用户是否一开始就打开了你的页面。

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

客户端检测

浏览器之间的差异以及不同浏览器的“怪癖”，多得简直不胜枚举。因此，客户端检测除了是一种补救措施之外，更是一种行之有效的开发策略。先设计最通用的方案，然后再使用特定于浏览器的技术增强该方案，无疑是一种正确的应对方式。

能力检测

能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。采用这种方式不必顾及特定的浏览器如何如何，只要确定浏览器支持特定的能力，就可以给出解决方案。例如，IE5.0 之前的版本不支持document.getElementById()这个DOM方法。尽管可以使用非标准的document.all属性实现相同的目的，但IE 的早期版本中确实不存在document.getElementById()。于是，也就有了类似下面的能力检测代码：

function getElement(id){
    if (document.getElementById){
        return document.getElementById(id);
    } else if (document.all){
        return document.all[id];
    } else {
        throw new Error("No way to retrieve element!");
    }
}

要理解能力检测，首先必须理解两个重要的概念。如前所述，第一个概念就是先检测达成目的的最常用的特性。对前面的例子来说，就是要先检测document.getElementById()，后检测document.all。先检测最常用的特性可以保证代码最优化，因为在多数情况下都可以避免测试多个条件。

第二个重要的概念就是必须测试实际要用到的特性。一个特性存在，不一定意味着另一个特性也存在。

在可能的情况下，要尽量使用typeof 进行能力检测。特别是，宿主对象没有义务让typeof 返回合理的值。下面这个函数通过检测对象是否存在sort()方法，来确定对象是否支持排序。

//不要这样做！这不是能力检测——只检测了是否存在相应的方法
function isSortable(object){
    return !!object.sort;
}
var result = isSortable({ sort: true }); // true

//这样更好：检查sort 是不是函数
function isSortable(object){
    return typeof object.sort == "function";
}

宿主对象没有义务让typeof 返回合理的值 ：在IE8 及之前版本中，typeof document.createElement 返回的是"object"，而不是"function"。IE对typeof xhr.open 会返回"unknown"。宿主对象没有义务保持目前的实现方式不变，也不一定会模仿已有宿主对象的行为。所以类似函数，都不能百分之百地保证永远可靠。作为开发人员，必须对自己要使用某个功能的风险作出理性的估计。在实际开发中，应该将能力检测作为确定下一步解决方案的依据，而不是用它来判断用户使用的是什么浏览器。

// 错误！还不够具体
// 以前，确实可以通过检测navigator.vendor 和
// navigator.vendorSub 来确定Firefox 浏览器。
// 但是，Safari 也依葫芦画瓢地实现了相同的属性
var isFirefox = !!(navigator.vendor && navigator.vendorSub);

// 错误！假设过头了
// 这就相当于假设IE 将来的版本中仍然会继续存在这两个属性
// 同时还假设其他浏览器都不会实现这两个属性
var isIE = !!(document.all && document.uniqueID);
用户代理检测

用户代理检测通过检测用户代理字符串来确定实际使用的浏览器。在每一次HTTP请求过程中，用户代理字符串是作为响应首部发送的，而且该字符串可以通过JavaScript的navigator.userAgent属性访问。

在服务器端，通过检测用户代理字符串来确定用户使用的浏览器是一种常用而且广为接受的做法。而在客户端，用户代理检测一般被当作一种万不得已才用的做法，其优先级排在能力检测之后。提到与用户代理字符串有关的争议，就不得不提到电子欺骗（spoofing）。所谓电子欺骗，就是指浏览器通过在自己的用户代理字符串加入一些错误或误导性信息，来达到欺骗服务器的目的。

在确定平台时，检测navigator.platform 要比检测用户代理字符串更简单，后者在不同浏览器中会给出不同的平台信息。而navigator.platform 属性可能的值包括"Win32"、"Win64"、"MacPPC"、"MacIntel"、"X11"和"Linux i686"，这些值在不同的浏览器中都是一致的。检测平台的代码非常直观。

var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p.indexOf("X11") == 0) || (p.indexOf("Linux") == 0);

通过检测用户代理字符串来识别浏览器。用户代理字符串中包含大量与浏览器有关的信息，包括浏览器、平台、操作系统及浏览器版本。用户代理字符串有过一段相当长的发展历史，在此期间，浏览器提供商试图通过在用户代理字符串中添加一些欺骗性信息，欺骗网站相信自己的浏览器是另外一种浏览器。用户代理检测需要特殊的技巧，详情见JavaScript高级程序设计书中9.3一章。

上一篇下一篇

猜你喜欢

热点阅读