javascript基础从小白到高手系列二千五百八十九：location对象

location 是最有用的 BOM 对象之一，提供了当前窗口中加载文档的信息，以及通常的导航功能。这个对象独特的地方在于，它既是 window 的属性，也是 document 的属性。也就是说， window.location 和 document.location 指向同一个对象。location 对象不仅保存着当前加载文档的信息，也保存着把 URL 解析为离散片段后能够通过属性访问的信息。这些解析后的属性在下表中有详细说明(location 前缀是必需的)。
假设浏览器当前加载的 URL 是 http://foouser:[email protected]:80/WileyCDA/?q= javascript#contents，location 对象的内容如下表所示。

location.hash
location.host location.hostname location.href
location.pathname location.port location.protocol location.search location.username location.password location.origin
"#contents"
"www.wrox.com:80" "www.wrox.com"
"http://www.wrox.com:80/WileyCDA/ ?q=javascript#contents"
"/WileyCDA/"
"80"
"http:" "?q=javascript" "foouser" "barpassword" "http://www.wrox.com"
URL 散列值(井号后跟零或多个字符)，如果没有则 为空字符串
服务器名及端口号
服务器名
当前加载页面的完整 URL。location 的 toString() 方法返回这个值
URL 中的路径和(或)文件名
请求的端口。如果 URL 中没有端口，则返回空字符串 页面使用的协议。通常是"http:"或"https:" URL 的查询字符串。这个字符串以问号开头 域名前指定的用户名
域名前指定的密码
URL 的源地址。只读

1 查询字符串

location 的多数信息都可以通过上面的属性获取。但是 URL 中的查询字符串并不容易使用。虽然 location.search 返回了从问号开始直到 URL 末尾的所有内容，但没有办法逐个访问每个查询参数。下面的函数解析了查询字符串，并返回一个以每个查询参数为属性的对象:

let getQueryStringArgs = function() {
    
    
// 取得没有开头问号的查询字符串
let qs = (location.search.length > 0 ? location.search.substring(1) : ""),
// 保存数据的对象 args = {};
// 把每个参数添加到 args 对象
for (let item of qs.split("&").map(kv => kv.split("="))) {
    
    
        let name = decodeURIComponent(item[0]),
          value = decodeURIComponent(item[1]);
        if (name.length) {
    
    
          args[name] = value;
} }

javascript基础从小白到高手系列二千五百八十九：location对象

1 查询字符串

猜你喜欢