1、Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。
属性 | 描述 |
---|---|
hash | 设置或返回从井号 (#) 开始的 URL(锚)。 |
host | 设置或返回主机名和当前 URL 的端口号。 |
hostname | 设置或返回当前 URL 的主机名。 |
href | 设置或返回完整的 URL。 |
pathname | 设置或返回当前 URL 的路径部分。 |
port | 设置或返回当前 URL 的端口号。 |
protocol | 设置或返回当前 URL 的协议。 |
search | 设置或返回从问号 (?) 开始的 URL(查询部分)。 |
2、为什么 window.location.search 为空?
答:注意search和hash的区别,
如果URL中“?”之前有一个“#”比如:“http://localhost:63342/index.html#/version?type=35&id=5”,
那么使用window.location.search得到的就是空(“”)。
因为“?type=35&id=5”是属于“#/version?type=35&id=5”这个串字符的,
也就是说查询字符串search只能在取到“?”后面和“#”之前这个区间的内容,如果“#”之前没有“?”,search取值为空。
3、采用正则表达式获取地址栏参数:
function getUrlSearch(name) {
// 未传参,返回空
if (!name) return null;
// 查询参数:先通过search取值,如果取不到就通过hash来取
var after = window.location.search;
after = after.substr(1) || window.location.hash.split('?')[1];
// 地址栏URL没有查询参数,返回空
if (!after) return null;
// 如果查询参数中没有"name",返回空
if (after.indexOf(name) === -1) return null;
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
// 当地址栏参数存在中文时,需要解码,不然会乱码
var r = decodeURI(after).match(reg);
// 如果url中"name"没有值,返回空
if (!r) return null;
return r[2];
}
// 调用方法
getUrlSearch("参数名");
// 举例1:若地址栏URL为:abc.html?id=123&name=池子&url=http://www.baidu.com
console.log('地址栏参数id',getUrlSearch("id"));
console.log('地址栏参数name',getUrlSearch("name"));
console.log('地址栏参数url',getUrlSearch("ursl"));
// 123
// 池子(不解码此处是乱码)
// null
// 举例2:若地址栏URL为:abc.html
console.log('地址栏参数id',getUrlSearch("id"));
// null