location对象详解
创始人
2024-06-01 06:30:38
0

location对象

location是最有用的BOM对象之一,它提供了与当前窗口中加载的文档信息,还提供了一些导航功能。既是window对象,也是document对象的属性,即window.location和document.location引用的是同一个对象。它主要的功能有以下3点

  1. 保存当前文档的信息
  2. 导航功能
  3. 解析URL

属性

属性名例子说明
hash#contents返回url中hash模式路径,即#号后的0或者字符串,如果url不是hash模式,则返回空字符串
hostwww.wrox.com:80返回服务器和端口名称
hostnamewww.wrox.com返回不带端口号的服务器名称
hrefhttp://www.wrox.com返回完整的url,location.toString()就是返回这个对象
pathname“/file/”返回URL中的目录或者文件名
port8080返回端口号
protocolhttp:返回协议,一般为http或者https
search?=javascript返回URL查询字符串,一般以?开头

例子

以掘金地址(https://juejin.cn/search?query=async await&type=0)为例,可以看到location返回的参数

在这里插入图片描述

查询字符串参数

尽管location.search会返回?后面的所有查询参数,但是始终是以字符串的形式,没有办法将查询参数解析出来。

location.search的参数生成规则如下:

  1. &拼接参数
  2. 格式为name=value
  3. 使用encodeURIComponent()加密

为此,可以根据URL查询参数生成的规则创建一个解析参数函数,如下:

function getQueryStringArgs() {// 取得要查询的字符串并去掉开头的问号var qs = (location.search.length > 0 ? location.search.substring(1) : ""),args = {},items = qs.length ? qs.split("&"): [],item = null,name = null,value = null,//  在for 循环中使用i = 0,len = items.length;// 逐个将每一项目添加到args对象中for (i; i < len; i++) {item = items[i].split("=");name = decodeURIComponent(item[0]);value = decodeURIComponent(items[1]);if (name.length) {args[name] = value}}console.log(args);return args;
}

踩坑记录

mdn中找到这样子一段话

现代浏览器提供 [URLSearchParams](https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams/get#examples)[URL.searchParams](https://developer.mozilla.org/zh-CN/docs/Web/API/URL/searchParams#examples)两个接口,使得从查询字符串中解析出查询参数变得更加容易。

但是他们下面都备注了一句话:

在这里插入图片描述

所以实际上在控制台使用这两个函数,并不能解析出查询参数,如下:
在这里插入图片描述

位置操作

跳转—location.assign()

改变浏览器位置,主要用法为location.assign(url) ,大概会返回以下3种结果:

  1. 触发窗口加载并显示指定的 url的内容
  2. 当前locationurl不是同源时,会抛出一个 SECURITY_ERROR类型错误
  3. 当传入一个无效的url时,会抛出一个 SYNTAX_ERROR类型

替换—location.replace()

替换当前资源,与 [assign()](https://developer.mozilla.org/zh-CN/docs/Web/API/Location/assign)方法不同的是,调用 replace()方法后,当前页面不会保存到会话历史中,即无法点击回退按钮回退

// 语法
object.replace(url);// 示例
object.replace('http://www.baidu.com');

其他

可以通过修改location对象的其他属性方法改变当前加载页面,比如hrefhashsearchpathname等等

// 将url改为http://baidu.com
location.href = 'http://baidu.com';// 改为http://baidu.com/#section
location.hash = '#section';// 改为http://baidu.com/?keyword=css
location.search = '?keyword=css';// 改为http://baidu.com/mydir
location.pathname = 'mydir';// 改为https://juejin.cn/
location.hostname='juejin.cn'// 将端口改为8080
location.port = '8080'

**注意:**每次修改location属性(hash除外),都会重新刷新页面
在这里插入图片描述

刷新页面—location.reload()

以最有效的方式刷新当前页面,主要规则如下:

  1. 页面自上次请求以来并没有改变时,页面从浏览器缓存中重新加载
  2. 如果页面有所改变,则从服务器中重新加载

这个主要是request header中判断是否更新,具体参考浏览器缓存知识梳理 一文

需要强制刷新的话,可以使用location.reload(true)

**注意:**位于location.reload()调用之后的代码有可能不会执行,这取决于网络延迟或者系统资源等因素。因此,最好将location.reload()放在最后一行

location.toString()

string的方式返回**整个url地址,**如下:
在这里插入图片描述

相关内容

热门资讯

【NI Multisim 14...   目录 序言 一、工具栏 🍊1.“标准”工具栏 🍊 2.视图工具...
银河麒麟V10SP1高级服务器... 银河麒麟高级服务器操作系统简介: 银河麒麟高级服务器操作系统V10是针对企业级关键业务...
不能访问光猫的的管理页面 光猫是现代家庭宽带网络的重要组成部分,它可以提供高速稳定的网络连接。但是,有时候我们会遇到不能访问光...
AWSECS:访问外部网络时出... 如果您在AWS ECS中部署了应用程序,并且该应用程序需要访问外部网络,但是无法正常访问,可能是因为...
Android|无法访问或保存... 这个问题可能是由于权限设置不正确导致的。您需要在应用程序清单文件中添加以下代码来请求适当的权限:此外...
北信源内网安全管理卸载 北信源内网安全管理是一款网络安全管理软件,主要用于保护内网安全。在日常使用过程中,卸载该软件是一种常...
AWSElasticBeans... 在Dockerfile中手动配置nginx反向代理。例如,在Dockerfile中添加以下代码:FR...
AsusVivobook无法开... 首先,我们可以尝试重置BIOS(Basic Input/Output System)来解决这个问题。...
ASM贪吃蛇游戏-解决错误的问... 要解决ASM贪吃蛇游戏中的错误问题,你可以按照以下步骤进行:首先,确定错误的具体表现和问题所在。在贪...
月入8000+的steam搬砖... 大家好,我是阿阳 今天要给大家介绍的是 steam 游戏搬砖项目,目前...