JavaScript获取url参数及Location对象简介

 2015年04月30日    4532     声明


window对名的location属性引用的是Location对象,它表示当前页面文档的URL。Location对象包括:hash 、host、hostname、origin 、port、pathname、protocal、search属性,及:assign、replace、reload方法。获取URL中的各种参数(如:querystring参数、锚点、网址等)都要使用此对象。


1、一个js获取url中的querystring参数的实例

工作中遇到了一个要在前端页面获取url中的querystring参数问题。有如下一个url:

http://localhost:3200/urlParams.html?query1=abc&query2=def#anchor1

现在要获url的查询参数中query1和query2的值:abc和def。location.search属性可以获取查询参数中“?”号及其后的内容,即:?query1=abc&query2=def。这并不是我想要的结果,所以要对search结果进行处理,处理方法如下:

function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
    var result = window.location.search.substr(1).match(reg);
    if (result!=null) {
	return result[2];
    } else {
	return null;
    };
}

用上面getQueryString方法能很好的解决获取querystring参数问题。就此机会整理下Location对象,以供学习参考。


2、Location对象

在chrome浏览器console.log(window.location);打印location对象,查看其属性及方法,输出如下:

ancestorOrigins: DOMStringList
assign: function () { [native code] }
hash: "#anchor1"
host: "localhost:3200"
hostname: "localhost"
href: "http://localhost:3200/urlParams.html?query1=abc&query2=def#anchor1"
origin: "http://localhost:3200"
pathname: "/urlParams.html"
port: "3200"
protocol: "http:"
reload: function reload() { [native code] }
replace: function () { [native code] }
search: "?query1=abc&query2=def"
toString: function toString() { [native code] }
valueOf: function valueOf() { [native code] }
__proto__: Location

属性

从结果可以看出,location对象自身有8个属性和3个方法。下面以上面的URL为示例对其属性的说明:

属性 定义 示例
hash URL的锚点内容,即:"#"(第一个)之后的内容 #anchor1
host 相当于hostname + port,即:主机名(域名)+端口号 localhost:3200
hostname 主机名,即:服务器名称(域名) localhost
origin 相当于:协议+主机名(域名)+端口
注:IE不支持此属性
http://localhost:3200
port 端口号 3200(当域名无显式端口时,此属性为空"")
pathname URL中主机名(域名)后的部分 /urlParams.html
protocal 协议 http:
search 查询字符串,即:“?”(第一个)及其后的部分 ?query1=abc&query2=def

location的8个属性都是可读写的,用的比较多的href和hash属性。改变location.href会跳转到一个URL,而修改location.hash会跳到当前页面中锚点。


方法

方法 说明
assign(url) location.assign('http://itbilu.com')方法相当于window.location = 'http://itbilu.com' 该方法会将新地址放到浏览器历史栈中,因此转到新页面后点击“后退按钮”仍可以回到该页面。
replace(url) 与assign方法相似,会从浏览器历史栈中删除本页面,也就是说跳转到新页面后点击“后退按钮”不能回到该页面。浏览支持情况:IE、Chrome只是简单的跳转,Firefox会删除本页面的历史记录。
eload(force) 刷新当前页面。force为true时从服务器端重新加载;为false时从浏览器缓存中重新加载。默认值false。