第八章：BOM（location对象、navigator对象、screen对象、history对象）

来源：互联网发布：易语言制作钓鱼软件编辑：程序博客网时间：2024/05/02 12:37

BOM
- location对象
  - 查询字符串参数
  - 位置操作
- navigator对象
  - 检测插件
- screen对象
- history对象

BOM

location对象

location对象提供了当前窗口中加载的文档有关的信息，还提供了一些导航功能。location对象既是window对象的属性，也是document对象的属性。也就是说，window.location和document.location引用的是同一个对象。location对象还可以将URL解析为独立的片段，我们可以通过不同的属性去访问这些片段：

属性名例子说明 hash #contents 返回URL中的hash（#后面跟的零或多个字符），如果不包含散列，则返回空字符串 host www.baidu.com:80 返回服务器名称和端口号（如果有） hostname www.baidu.com 返回服务器名称 href http://www.baidu.com 返回完整的URL。location对象的toString()方法也返回这个值 pathname /webapps/login 返回URL中的目录和(或)文件名 port 80 返回端口号，如果不包含端口号则返回空字符串。 protocol http: 返回页面使用的协议。通常是http:或者https: search ?a=123 返回URL的查询字符串。这个字符串以问号开头

查询字符串参数

通过location.search能够返回整串查询字符串，但通常我们需要的是一个个键值对。为此，可以创建下列函数，用来解析字符串，然后返回包含所有参数的一个对象。下面有两个方法，一个是我自己写的，一个是书上的。

    function getQueryStringArgs() {        var str = window.location.search,            pattern = /[\?&]([^=]*)=([^&]*)/g,            args = new Array(),            key = null,            value = null;        while (matches = pattern.exec(str)) {            key = decodeURIComponent(matches[1]);            value = decodeURIComponent(matches[2]);            if (key.length) {                //alert("key:" + key + " value:" + value);                args[key] = value;            }        }        return args;    }    //书上的方法思路比较简单,先去?号,根据&号split,再根据=号split    function getQueryStringArgs(){        var qs = (location.search.length > 0 ? location.search.substring(1) : ""),            args = {},            items = qs.length ? qs.split("&") : [],            item = null,            name = null,            value = null,            i = 0,            len = items.length;        //assign each item onto the args object        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;    }

位置操作

使用location对象可以通过很多方式改变浏览器浏览的地址位置。最常用的方式是使用assign()方法为其传递一个URL：

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

另外，如果将location.href或window.location设置为一个URL值，也会以该值调用assign()方法。

    location = "http://www.baidu.com";//省略window也可以，因为此处window是全局执行域。    location.href = "http://www.baidu.com";

前面提到过location对象的一些属性，通过改变这些属性，同样也可以改变当前加载的页面。

    //假设初始URL为 http://www.wrox.com/helloworld/    //将URL修改为 http://www.wrox.com/helloworld/#section1    location.hash = "#section1";    //将URL修改为 http://www.wrox.com/helloworld/?q=javascript    location.search = "?q=javascript";    //将URL修改为 http://www.yahoo.com/helloworld/    location.hostname= "www.yahoo.com";    //将URL修改为 http://www.wrox.com/mydir/    location.pathname= "mydir/";//起始斜杠可加可不加，结束斜杠加了不加效果一样，但是显示不一样。    //将URL修改为 http://www.wrox.com:808/helloworld/    location.port= 8080;

每次修改location的属性都会重新加载页面(除了hash属性)。
在IE8、Firefox1、Safari2+、Opera9+和Chrome中，修改hash值会在浏览器的历史记录中生成一条新纪录。在IE的早期版本中，hash属性不会在用户单击”后退”和”前进”按钮时更新，只会在用户单击包含hash的URL时才会被更新。
上述做法修改URL后，浏览器历史记录中就会生成一条新纪录（下面会说history对象）。因此用户单击后退会导航到前一个页面。要禁止这种行为，可以使用replace()方法。这个方法只接受一个参数，即要导航到的URL，这种方式不会生成历史记录。

<!DOCTYPE html><html><head>    <title>You won't be able to get back here</title></head><body>    <p>Enjoy this page for a second, because you won't be coming back here.</p>    <script type="text/javascript">        setTimeout(function () {            location.replace("http://www.wrox.com/");        }, 1000);    </script></body></html>

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

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

位于reload()方法后面的代码可能会也可能不会执行，这取决于网络延迟或系统资源等因素。所以最好把reload()放在代码的最后一行。

navigator对象

最早由Netscape Navigetor 2.0引入的navigator对象，现在已经成为识别客户端浏览器的事实标准。以下是它的属性和方法，因为太多，我用截图放在这：

检测插件

检测浏览器中是否安装了特定的插件是一种最常见的检测例程。对于非IE浏览器，可以使用plugins数组来达到这个目的。该数组的每一项包含下列属性：
1. name: 插件的名字
2. description: 插件的描述
3. filename: 插件的文件名
4. length: 插件所处理的MIME类型数量
一般name属性包含检测插件必须的信息。

    //plugin detection - doesn't work in 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;    }    //detect flash    alert(hasPlugin("Flash"));    //detect quicktime    alert(hasPlugin("QuickTime"));    //detect Java    alert(hasPlugin("Java"));

每个插件对象本身也是MimeType对象的数组。每个MimeType对象有4个属性：包含MIME类型描述的description、回指插件对象的enabledPlugin、表示与MIME对象类型对应的文件扩展名的字符串suffixes(以逗号分隔)和表示完整的MIME类型字符串的type。
也就是说上面代码中的 navigator.plugins[i].name 改成 navigator.mimeTypes[i].description通常也能达到一样的效果。
在IE中要想检测插件比较麻烦。IE是以COM对象的方式实现插件的，而COM对象使用唯一标识符来标识。所以要想检测特定的插件，就必须指定对应的COM标识符。例如Flash的标识符是ShockwaveFlash.shockwaveFlash。

    //plugin detection for IE    function hasIEPlugin(name){        try {            new ActiveXObject(name);//创建未知COM对象会抛出错误            return true;        } catch (ex){            return false;        }    }    //detect flash    alert(hasIEPlugin("ShockwaveFlash.ShockwaveFlash"));    //detect quicktime    alert(hasIEPlugin("QuickTime.QuickTime"));

在不知道会在哪种浏览器中运行的时候，我们可以使用组合的方式判断是否安装了某种插件:

    function hasFlash() {        var result = hasPlugin("Flash");        if (!result) {            result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash");        }        return result;    }

screen对象

该对象在编程中一般没有什么用，里面有很多属性，具体看书215页。

history对象

history对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。因为history是window的属性，因此每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。出于安全考虑，开发人员无法得知用户浏览过的URL。不过可以在不知道实际URL的情况下实现后退或者前进。
使用go()方法可以在用户的历史记录中任意跳转，可以向前也可以向后。来看下面的例子：

    //后退一页    history.go(-1);    //前进一页    history.go(1);    //前进两页    history.go(2);    //跳转到最近的wrox.com页面(URL包含该字符串，如果没有什么都不做)。    history.go("wrox.com");

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

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

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

注意在IE8+及其他浏览器中，改变URL就会生成新的记录，哪怕只是改变了hash值。

0 0