location对象

摘要：location对象的相关知识

location 对象

location 对象提供了与当前页面中加载的文档有关的信息，还提供了一些导航功能， window.location 和 document.location 是同一个对象
location 对象的属性：
1、window.location.href
返回页面完整的URL
http://www.wrox.com

2、window.location.protocol
返回页面使用的协议部分
http: 或 https:

3、window.location.host
返回服务器名称和端口号（如果有）
www.wrox.com:80

4、window.location.hostname
返回服务器名称
www.wrox.com

5、window.location.port
返回 URL 的端口号
如果采用默认的 80 端口，那么返回值并不是默认的 80 而是空字符
8080

6、window.location.pathname
URL 的路径部分(就是文件地址)
/fWileyCDA/index.html

7、window.location.hash
返回 URL 中的 hash（#号后跟零或多个字符），如果 URL 中不包含散列，则返回空字符串
#contents

8、window.location.search
返回 URL 的查询字符串，这个字符串以问号开头
?q=javascript

跳转

1
2
3
4
5
6
// 跳转并在历史记录中生成一条记录（可以返回），三种方法效果完全一样
location.assign("http://www.wrox.com");
location.href = "http://www.wrox.com";
window.location = "http://www.wrox.com";
// 跳转但不生成新纪录（不可返回）
location.replace("http://www.wrox.com");

获取参数

方法一：正则匹配

1
2
3
4
5
6
7
8
9
10
function getUrlParam(key) {
  var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)"); // 构造一个含有目标参数的正则表达式对象
  var r = window.location.search.substr(1).match(reg);  // 匹配目标参数
  if (r != null) { //返回参数值
    return unescape(r[2]);
  }
  return null;
}
// 调用方法
getUrlParam('parameter');

封装成jquery插件：

1
2
3
4
5
6
7
8
9
10
11
12
(function ($) {
  $.getUrlParam = function (key) {
    var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
      return unescape(r[2]);
    }
    return null;
  }
})(jQuery);
// 调用方法
$.getUrlParam('parameter');

方法二: 将地址参数对拆分成数组再组成对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function getQueryStringArgs() {
  // 取得查询字符串并去掉开头的问号
  var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
    // 保存数据的对象
    args = {},
    // 取得每一项
    items = qs.length ? qs.split('&') : [],
    item = null,
    key = null,
    value = null,
    // 在for循环中使用
    len = items.length;
  // 将每一项添加到args对象中
  for (i = 0; i < len; i++) {
    item = items[i].split('=');
    // 对编码后的字符进行解码
    key = decodeURIComponent(item[0]);
    value = decodeURIComponent(item[1]);
    if (key.length) {
      args[key] = value;
    }
  }
  return args;
}
// 调用方法
var args = getQueryStringArgs();
args["key"];

《JavaScript高级程序设计》（第三版）8.2 location对象