lhajh

Location 对象

2018/03/02

Location 对象包含有关当前 URL 的信息。

Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

Location 对象属性

属性 描述 例子 返回值
href 设置或返回完整的 URL。 http://example.com:1234/test.htm#part2 http://example.com:1234/test.htm#part2
host 设置或返回主机名和当前 URL 的端口号。相当于 hostname + port，当端口为 80 时，和 hostname 一样 http://example.com:1234/test.htm#part2 example.com:1234
hostname 设置或返回当前 URL 的主机名。 http://example.com:1234/test.htm#part2 example.com
port 设置或返回当前 URL 的端口号。 http://example.com:1234/test.htm#part2 1234
protocol 设置或返回当前 URL 的协议。 http://example.com:1234/test.htm#part2 http:
pathname 设置或返回当前 URL 的路径部分。 http://example.com:1234/test.htm#part2 /test.htm
hash 设置或返回从井号 (#) 开始的 URL（锚）。 http://example.com:1234/test.htm#part2 #part2
search 设置或返回从问号 (?) 开始的 URL（查询部分）。 http://example.com:1234/test/t.asp?f=hdom_loc_search ?f=hdom_loc_search

注: 当 URL 同时存在 # 和 ? 时, 当 ? 在 # 前面, search 能正确截取, 当 ? 在 # 后面, search 返回为空字符串; 而 hash 只会从 # 开始截取到结尾, 不受位置影响

当一个 Location 对象被转换成字符串，href 属性的值被返回。这意味着你可以使用表达式 location 来替代 location.href。

很多时候我们需要验证拿到的是否是我们想要的参数, 难道只能先在浏览器地址栏打开 URL, 再从 window.location 中获取? 其实我们可以先创建一个 a 标签然后将需要解析的 URL 赋值给 a 的 href 属性，然后就得到了一切我们想要的了。

var a = document.createElement('a')
a.href = 'https://lhajh.github.io/js/2018/03/02/Location-object.html'
console.log(a.host) // lhajh.github.io

利用这一原理，稍微扩展一下，就得到了一个更加健壮的解析 URL 各部分的通用方法了。

function parseURL(url) {
  var a = document.createElement('a')
  a.href = url
  return {
    href: url,
    protocol: a.protocol.replace(':', ''),
    host: a.host,
    hostname: a.hostname,
    port: a.port,
    query: a.search,
    params: (function() {
      var ret = {},
        seg = a.search.replace(/^\?/, '').split('&'),
        len = seg.length,
        i = 0,
        s
      for (; i < len; i++) {
        if (!seg[i]) {
          continue
        }
        s = seg[i].split('=')
        ret[s[0]] = s[1]
      }
      return ret
    })(),
    pathname: a.pathname,
    file: (a.pathname.match(/\/([^\/?#]+)$/i) || [, ''])[1],
    hash: a.hash.replace('#', ''),
    path: a.pathname.replace(/^([^\/])/, '/$1'),
    relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [, ''])[1],
    segments: a.pathname.replace(/^\//, '').split('/')
  }
}

你可以在下面输入框中输入需要查询的 url 来体验一下!

如果需要处理复杂的 URL, 请看这篇

Location 对象方法

属性 描述
assign() 加载新的文档。
reload() 重新加载当前文档。
replace() 用新的文档替换当前文档。

Search

    Post Directory