浏览器的 location 对象

GZlaoBen
1,142 阅读3分钟

location 介绍

  • 在浏览器中，使用 location 对象可以获取当前窗口中加载的文档的路径信息。
  • location 对象既是 window 对象的属性，也是 document 对象的属性，也就是说，window.location === document.location 为真。
  • location 对象还将 URL 解析为独立的片段，让开发人员可以通过不同的属性访问这些片段。
属性例子说明
hash#content返回 URL 中的 hash，即为 # 号后跟零或多个字符。若 # 号后没有字符，则为空字符串。
hostgzlaoben.xyz:10000返回服务器名称和端口号（如果有）
hostnamegzlaoben:xyz返回不带端口号的服务器名称
hrefhttp://gzlaoben.xyz返回当前加载页面的完整 URL。即为 location.toString() 方法返回的值
pathname/id/14返回 URL 中的目录和（或）文件名
port8080返回 URL 中指定的端口号
protocolhttps:返回页面使用的协议
search?name=ben返回 URL 的查询字符串。若 ? 号后没有字符，则返回空字符串。

查询字符串参数

location.search 虽然可以返回从 ? 号到 URL 末尾的所有内容，但却没有办法逐个访问其中的每个查询字符串参数。为此，我们可以像下面这样创建一个函数，用以解析查询字符串，然后返回包含所有参数的一个对象。

function getQueryStringArgs() {
    // 取得查询字符串并去掉开头的问号
    let queryStr = location.search.length > 0 ? location.search.substring(1) : ''
    // 使用 & 号分隔符获取每一项参数键值对
    let queryArr = queryStr.length ? queryStr.split("&") : []
    // 保存参数对象
    let params = {}
    for (let itemStr of queryArr) {
        let item = itemStr.split('=')
        let name = decodeURIComponent(item[0])
        let value = decodeURIComponent(item[1] || '')
        if (name.length) {
            params[name] = value
        }
    }
    return params
}
  • 在分析键值对的时候要注意两种以下的异常：
    1. 两个 & 号之间没有字符：?&&
    2. 没有键名：?=xxx
    3. 没有值：?xxx= 或 ?xxx&a=b
  • 为了防止键值中出现 # & / 等 URL 关键字符，因此 getQueryStringArgs 方法是现将键值对提取出来，再使用 decodeURIComponent 方法进行 URI 解码。
    1. decodeURIComponent 和 encodeURIComponent 方法可以对 ;,/?:@&=+$ 等 URI 保留字符进行解码和编码。
    2. decodeURI 和 encodeURI 方法则对除了 URI 保留字符外的需要进行编码的字符进行解码和编码。
    3. URI 工具函数在设计时应当考虑到最大兼容性。因此在拼接键值对前就使用 encodeURIComponent 方法分别对键值编码；在获取键值对参数时，应当拆分 location.search 并排除已有的 URI 保留字符后在对键值分别使用 decodeURIComponent 方法解码。

位置操作

非覆盖跳转

  1. 可使用 location.assign(url)
  2. 直接修改 location.href 或 location
  3. 可使用 open(url, '_self') 以上方式都可以立即打开新的 URL 并在浏览器的历史记录中生成一条记录。 此外，可以针对性地修改 location 对象的其他属性，也可以改变当前加载的页面（修改 hash 不会重载页面，但是会新增一条历史记录）。

覆盖跳转

使用 location.replace(url) 方法可以让用户不能回退到上一个页面，并且会覆盖掉当前的这条历史记录。

重新加载页面

可使用 location.reload() 方法重新加载页面。 这个方法接收一个参数：如果传入 true 则浏览器会强制从服务器重新加载；否则浏览器会尝试从缓存中重新加载。

avatar
文章
阅读
粉丝