浅谈location对象金沙官网线上:

同源策略三兄弟

众所周知,所有浏览器全都采取同源策略,即:

  • 协议相同
  • 域名相同
  • 端口相同

协议、域名、端口在Location对象中分别对应的属性是:protocolhostnameport

window.location.href            // http://localhost:8080/#/b?a=1
window.location.protocol        // http:
window.location.hostname        // localhost
window.location.port            // 8080

很多时候,我们需要同时比对协议、域名和端口这三项属性是否全部相等,而一个个分别调用又太麻烦了,此时可以使用origin属性,该属性返回完整的协议和主机地址(包括端口)。

当需要主机地址的时候,可以调用host属性,该属性返回主机地址,即域名和端口。

window.location.href            // http://localhost:8080/#/b?a=1
window.location.origin          // http://localhost:8080
window.location.host            // localhost:8080

方法

href

href属性是最常用的一种属性,通过window.location.href可以获取完整的URL。Location的对象属性都有一个特点,即对象属性都是writable,可以通过属性值的替换来重新设置属性值。这也引出了对象属性最常用的一种用法,通过重新设置href属性来跳转网页。

window.location.href = "www.baidu.com"

location.username

设置或返回url中域名前面的用户名

// 网址  "https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.username"
location.username = 'anonymous';

简介

Location 对象存储在 Window 对象的 Location 属性中,表示那个窗口中当前显示的文档的 Web 地址。通过Location对象,可以获取URL中的各项信息,调用对象方法也可以重新加载或替换当前文档。

在控制台输入window.location可以获取Location对象的详细信息:

金沙官网线上 1

Location.replace()

提供一个URL,使页面跳转到相应的URL,与location.assign()的区别是,location.replace()跳转后的页面不会保存在浏览器历史中,即无法通过返回按钮返回到该页面。

replace方法

replace方法类似于assign方法,加载新的文档,但是它与assign方法的不同在于,它是用新的URL替换History对象中的当前记录,相当于替换当前文档。

window.location.replace("www.baidu.com")        // history对象被替换

location.username

设置或返回url中密码部分

// 网址"https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.username"
location.password = 'flabada';

search

search也是一个常用属性,用来获取URL的查询部分

window.location.href            // http://www.w3school.com.cn/tiy/t.asp?f=hdom_loc_search
window.location.search          // f=hdom_loc_search

tips:

1.使用window.location.search修改查询部分需要注意,不需要在keyvalue之间添加空格,因为空格自动会转为%20

2.当一个URL中#(hash)在?之前,使用hash属性会取到#开始的所有字符串,而search属性永远为空,因为当同时存在#?时,search属性只能取到#之前的查询属性,而#之后的查询属性会被归入锚点字符串。该问题在vue中经常出现,因为使用vue-router进行路由跳转时,有时会使用query进行传参,传参是直接显示在URL中的,此时通过window.location.search取参会出现这个问题。

解决方案有两种:

  • 通过vue-router的this.$route.query来取值,不通过window.location.search获取查询参数,当然,更建议通过params进行隐式传值,减少危险
  • 使用vue-router的history模式来直接去除锚点

属性

pathname

pathname代表着URL的路径部分

window.location.href            // http://example.com:1234/test/test.htm#part2
window.location.pathname        // /test/test.html

如果想要获得当前文档的完整url字符串,有四种方式

hash

Location对象拥有hash属性,用来获取从#开始的URL(锚)。#代表网页中的一个位置,它之后的字符串,就是该位置的标识符,又称为锚点。

window.location.href            // http://example.com:1234/test.htm#part2
window.location.hash            // #part2

location.search

又名查询字符串,返回url中?以及之后的字符串

// 网址为 "https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.search?q=123"
location.search = '?q=123';
//将去掉问号后的字符串解析为URLSearchParams对象
let params = new URLSearchParams(location.search.substring(1));
//利用get方法获取指定的参数
let q = parseInt(params.get("q")); // is the number 123

对象方法

Location.assign()

该方法使浏览器加载并展示URL所指定的文档

document.location.assign('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

assign方法

assign方法用于加载新的文档,接收一个参数,即新的文档的URL,效果类似于将该URL赋值给href属性。

window.location.assign("www.baidu.com")     // 跳转到www.baidu.com
window.location.href = "www.baidu.com"      // 效果同上

金沙官网线上,location.port

返回url的端口信息。没有写端口信息的url,实际端口为与协议相关的端口号

  // 网址 "https://developer.mozilla.org:443/en-US/HTMLHyperlinkElementUtils.host";
  location.port = "443"

reload方法

reload方法用于重新加载当前文档,接收一个可选参数,值为布尔类型,默认为false代表是否强制重新加载。

window.location.reload()            // 类似于刷新
window.location.reload(false)       // 同上
window.location.reload(true)        // 强制重新加载

location指示了其所连接对象的url位置。Documentwindow对象中都有location属性,可以通过window.locationdocument.location访问。

对象属性

location.pathname

返回url的路径字符串

  // 网址 "https://developer.mozilla.org:443/en-US/HTMLHyperlinkElementUtils.host";
  location.pathname = "/en-US/HTMLHyperlinkElementUtils.host";

注意这里包括最前面的/和最后面的index.html

本文由金沙官网线上发布于Web前端,转载请注明出处:浅谈location对象金沙官网线上:

您可能还会对下面的文章感兴趣: