JavaScript中location对象使用【详解】

✨前言✨
  本篇文章主要在于，了解并会使用JavaScript中location对象

🍒欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁
🍒博主将持续更新学习记录收获，友友们有任何问题可以在评论区留言

---

🍎一，Location 对象

 Location对象包含有关当前URL的信息。location对象是window对象的一部分，可以通过window.location属性访问。

 注意： 没有适用于location对象的公共标准，但所有主流浏览器都支持它。

---

🍎二，Location 对象 属性和方法

可以在Location对象上使用以下属性：

属性	描述
href：	获取或设置页面的URL。
protocol：	获取页面的URL协议（如http或https）。
hostname：	获取页面的主机名（包括域名和端口）。
port：	获取页面的端口号。
pathname：	获取页面的路径名（不包括参数和查询）。
search：	获取页面的查询参数（即URL中"?"后面的部分）。
hash：	获取页面的锚点（ “#” 后面的部分）。
origin：	获取页面的URL的协议、主机名和端口部分。

可以在Location对象上使用以下方法：

方法	描述
assign()：	跳转到指定URL。
reload()：	重新加载当前页面。
replace()：	替换当前页面为指定URL。

assign 和 replace不一样 一个可以返回 一个不可.

🍎三，代码示例

属性

首先控制打印看一下

1. location属性

document.write(location);

location是挂在window的对象也是document下的对象

window.location
document.location
location
// 指的是同一个

Location.href

包含整个URL地址返回

href: "http://127.0.0.1:8848/testshare/location.html?lang=en&name=zhangsan#test/most"

当location.href赋值时会跳转

location.href = 'http://www.baidu.com'   
// 跳转

Location.protoco

包含URL对应协议 http 或者https，最后有一个":"。

 document.write(location.protocol); //--->http:

Location.host

包含了域名，可能在该串最后带有一个":"并跟上URL的端口号。

document.write(location.host); //--->localhost:63342

Location.hostname

包含URL域名

document.write(location.hostname); //--->localhost

Location.port

包含端口号。

document.write(location.port); //--->63342

Location.pathname

包含URL中路径部分，开头有一个“/"。

document.write(location.pathname); 
//--->/item/JavaScript/JSTest/Js_2/Test_1/incidentTest/Locatime%E5%AF%B9%E8%B1%A1%E6%B5%8B%E8%AF%95.html

Location.search

包含URL参数，开头有一个“?”。

document.write(location.search);
//--->?_ijt=5uacmb18298sn0em1ascr0q04q&_ij_reload=RELOAD_ON_SAVE

Location.hash

块标识符，开头有一个“#”。 哈希值 vue-router中的哈希模式就是用这个。

document.write(location.hash); //--->#test/most

Location.origin 只读

包含页面来源的域名，也是从哪个页面跳转来的

document.write(location.origin ); //--->http://localhost:63342	

---

方法

2. location的方法

Location.reload()

Location.reload() 方法用来刷新当前页面。该方法只有一个参数，当值为 true 时，将强制浏览器从服务器加载页面资源，当值为 false 或者未传参时，浏览器则可能从缓存中读取页面。

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

Location.assign()

Location.assign() 方法会触发窗口加载并显示指定的 URL的内容

document.location.assign('https://www.baidu.com');

Location.replace()

Location.replace() 方法以给定的URL来替换当前的资源。 与assign() 方法 不同的是，调用 replace() 方法后，当前页面不会保存到会话历史中 （session History） ，这样，用户点击回退按钮时，将不会再跳转到该页面。

document.location.replace('https://www.baidu.com');

---

✨最后✨

总结不易，希望uu们不要吝啬你们的👍哟(＾Ｕ＾)ノ~ＹＯ！！
如有问题，欢迎评论区批评指正😁