Skip to main content

Location URL 操作对象

一、属性​

1、location.href​

返回完整的 URL。

location.href
// 'http://localhost:7777/1634108810396'

location.href
// 'https://www.leophen.cn/1634108810396'

2、location.protocol​

返回 URL 对应的协议。

location.protocol
// 'https:'

3、location.host​

返回 URL 的主机名和端口。

location.host
// 'localhost:7777'

location.host
// 'www.leophen.cn'

4、location.hostname​

返回 URL 的主机名。

location.hostname
// 'localhost'

location.hostname
// 'www.leophen.cn'

5、location.port​

返回 URL 服务器使用的端口号。

location.post
// undefined

6、location.pathname​

返回的 URL 路径名。

location.pathname
// '/1634108810396'

7、location.search​

返回 URL 的查询部分。

location.search
// ''

8、location.hash​

返回一个 URL 的锚部分，开头有一个 #

location.hash
// '#8%E3%80%81locationhash'

9、location.origin（只读）​

返回页面来源的域名的标准形式。

location.origin
// 'http://localhost:7777'

location.origin
// 'https://www.leophen.cn'

二、方法​

1、location.assign()​

location.assign(url);

功能：从当前页跳转到一个新页面，可返回上一页到原页面。

参数：

  • url：要跳转到的链接。

示例：

// 跳转到 location.reload() 这篇文章
document.location.assign('https://developer.mozilla.org/zh-CN/docs/Web/API/Location/reload');

2、location.replace()​

object.replace(url);

功能：用新的页面替换当前页面，但与原页面共用返回的上一页。

参数：

  • url：要替换的链接。

示例：

// 将当前页替换成 location.reload() 这篇文章
window.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location/reload');

3、location.reload()​

object.reload(forcedReload);

功能：重新载入当前页面。

参数：

  • forcedReload（可选）：为 true 时将强制刷新，浏览器从服务器重新获取当前页面资源而不是从缓存中读取，为 false 或省略时，浏览器从缓存中读取当前页面。

示例：

// 强制刷新页面（但页面引用的资源还是可能使用缓存）
// 大多数浏览器可以通过设置在打开开发者工具时禁用缓存实现无缓存需求）
window.location.reload(true);

4、location.toString()​

string = object.toString();

功能：返回指定对象的整个 URL 作为字符串。

参数：无

示例：

<a
  id="myAnchor"
  href="https://developer.mozilla.org/en-US/docs/Location/toString"
/>

var anchor = document.getElementById('myAnchor')
console.log(anchor.toString())
// 'https://developer.mozilla.org/en-US/docs/Location/toString'