javascript基础从小白到高手系列六百八十九:location对象

location 是最有用的 BOM 对象之一,提供了当前窗口中加载文档的信息,以及通常的导航功能。 这个对象独特的地方在于,它既是 window 的属性,也是 document 的属性。也就是说, window.location 和 document.location 指向同一个对象。location 对象不仅保存着当前加载文 档的信息,也保存着把 URL 解析为离散片段后能够通过属性访问的信息。这些解析后的属性在下表中 有详细说明(location 前缀是必需的)。
假 设 浏 览 器 当 前 加 载 的 URL 是 http://foouser:barpassword@www.wrox.com: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;
} }
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值