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

最新推荐文章于 2022-11-24 22:13:51 发布

miaoch

最新推荐文章于 2022-11-24 22:13:51 发布

阅读量613

点赞数

分类专栏： JavaScript高级程序设计阅读笔记文章标签： javascript

本文链接：https://blog.csdn.net/miaoch/article/details/69941853

版权

JavaScript高级程序设计阅读笔记专栏收录该内容

37 篇文章 0 订阅

订阅专栏

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值。

miaoch

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第八章：BOM（location对象、navigator对象、screen对象、history对象）

BOMlocation对象查询字符串参数位置操作navigator对象检测插件BOMlocation对象location对象提供了当前窗口中加载的文档有关的信息，还提供了一些导航功能。location对象既是window对象的属性，也是document对象的属性。也就是说，window.location和document.location引用的是同一
复制链接

扫一扫

专栏目录