window.location可获取地址栏的一系列信息,并且每个浏览器都支持该属性,非常方便。而获取到的问号后面的参数可以进行加工转变成我们所想要的键值对。
location的属性:
属性名 | 例子 | 说明 |
---|---|---|
hash | “#contents” | 返回URL的hash(#后跟零或多个字符),如果URL中不包含散列,则返回空字符串 |
host | “www.wrox.com:80” | 返回服务器名称和端口号(如果有) |
hostname | “www.wrox.com” | 返回不带端口号的服务器名称 |
href | “http://www.wrox.com” | 返回当前加载页面的完整URL。而location对象的toString()方法也返回这个值 |
pathname | “WileyCDA” | 返回URL中的目录或文件名 |
port | “8080” | 返回URL中指定的端口号。如果URL中不包含端口号则返回空字符串 |
protocol | “http:” | 返回页面的使用协议。通常是http:或https: |
search | “?q=javascript” | 返回URL的查询字符串,这个字符串以问号开头 |
而修改了其中的任何属性,都会使得页面刷新,当然页面刷新还有其它方式。
location刷新
1 location.assign(url); // 跳转链接 2 location.href = url; // 跳转链接 3 window.location = url; // 跳转链接 4 location.replace(url); // 链接链接,不保存于历史纪录 5 location.reload(); // 刷新,从缓存中读取 6 location.reload(true); // 刷新,重新从服务器读取
获取地址栏的参数,并以键值对展现
1 function getQueryStringArgs() { 2 var qs = (location.search.length > 0 ? location.search.substring(1) : ""), 3 args = {}, 4 items = qs.length ? qs.split("&") : [], 5 item = null, 6 name = null, 7 value = null, 8 i = 0, 9 len = items.length; 10 11 for (i = 0; i < len; i++) { 12 item = items[i].split("="); 13 14 // decodeURIComponent解码 15 name = decodeURIComponent(item[0]); 16 value = decodeURIComponent(item[1]); 17 18 if (name.length) { 19 args[name] = value; 20 } 21 } 22 23 return args; 24 }
通过调用getQueryStringArgs()方法就可以返回地址栏中的参数信息,并保存于对象中。