BOM中的那点事-location

      现在来了解一下JavaScript中的location对象。location记录了页面文档的位置信息，当然这个位置不是地址位置，而是指web中的文档位置。location其实是一个很特殊的对象，首先它是window的属性，同时也是document的属性，换句话说window.location和document.location引用的同一个对象。location的有用之处不仅仅是它记录文档信息，同时它还将文档的URL解析为不同的部分，编程时可以通过不同的属性方便地引用各个部分，下表列出来location中URL的各个部分：

属性名称	示    例	描       述
hash	#test	返回URL中的hash值，#号后跟数字，如果URL中没有哈希值返回空字符串
host	www.test.com:80	返回服务器名称和端口号
hostname	www.test.com	返回不含端口号的服务器名称
href	http://www.test.com	返回加载文档的完整URL地址，location的toString函数返回该值
pathname	/admin/login.html	返回URL中除server名称和端口的目录和文件名称
port	80	服务器端口
protocol	http	加载的文档URL所使用的协议
search	?q=javascript	返回查询字符串

虽然通过location可以轻易访问到查询字符串，但是想获取查询字符串中的参数就没有这么方便，可以通过如下函数来分离各个参数的名称和值：

function getQueryStringArgs() {
    //获取查询字符串，通过substring去掉最前面的问号
    var qs = (location.search.length > 0) ? location.search.substring(1) : "";
    //创建保存查询参数的对象
    var args = {};
    //获取参数每一项
    var argItems = qs.split('&');
    var item = null, name = null, value = null;
    //遍历每个项目，通过=号分隔参数名称和值
    for (var i = 0; i < argItems.length; i++) {
        item = argItems[i].split('=');
        name = decodeURIComponent(item[0]);
        value = decodeURIComponent(item[1]);
        args[name] = value;
    }

    return args;
}

通过location我们可以改变加载的文档。首先，也是最常用的方法就是使用assign，通过assign使窗体加载新指定的URL：

window.location.assign(http://www.google.com);

通过调用assign可以立即加载指定的URL，并且咋浏览器历史记录中增加一条，当然如果我们设置location.href属性的值或者直接设置location对象为一个URL，效果等同于调用assign一样，立即打开新的URL：

window.location = "http://www.google.com";
window.location.href = http://www.google.com;

href的方式似乎是我们最常用的了。另外修改location中其他的属性也会改变加载的页面，使浏览器重新加载页面，如下代码：

window.location = "http://www.test.com";
//修改hash
location.hash = "#section";
//修改查询字符串
location.search = "?q=javascript";
//修改服务器名称
location.hostname = "www.google.com";
//修改pathname
location.pathname = "test";

当然通过上面的方法加载新的URL时会为浏览器历史记录增加一条，那么点击向后的时候会退回的前一个地址，如果我们不想记录浏览历史，可以通过replace函数来实现该功能：

window.location.replace(http://www.cnblogs.com);

location还有一个有用的函数reload，通过reload可以从新加载文档，但是首先会检查缓存区是否有该地址的文档，如果有从缓存区加载，否则从服务器加载，但是可以通过参数来取消这一策略：

//从新加载，有可能从缓存加载
window.location.reload();
//从新加载，直接从服务器加载
window.location.reload(true);

location是一个非常有用的对象，在编程时经常会用到，在此仅当抛砖引玉。如果有其他值得注意的或者有错误欢迎指正。

 

有园友反应需要说明BOM和DOM，由于本文章不是介绍BOM和DOM，因此把相关链接贴出来，大家可以阅读：

关于JavaScript组成：http://javascript.about.com/od/browserobjectmodel/a/bom01.htm

关于BOM：http://msdn.microsoft.com/en-us/library/ms952643.aspx

也可以看：http://titan.iteye.com/blog/60389

关于DOM请看：http://en.wikipedia.org/wiki/Document_Object_Model

和：http://www.w3.org/DOM/