js Location 对象

最新推荐文章于 2024-06-10 22:18:41 发布

郑书鑫

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量41

点赞数

分类专栏： js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_63825009/article/details/132699541

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Location 对象包含有关当前 URL 的信息。

Location 对象是 window 对象的一部分，可通过 window.location 属性对其进行访问。

1.1 Location对象属性

属性	描述
hash	返回一个 URL 的锚部分 ( 锚点 )
host	返回一个 URL 的主机名和端口
hostname	返回 URL 的主机名
href	返回完整的 URL
pathname	返回的 URL 路径名。
port	返回一个 URL 服务器使用的端口号
protocol	返回一个 URL 协议
search	返回一个 URL 的查询部分？之后

1.2 Location对象方法

方法	说明
assign()	载入一个新的文档 location.assign(URL)
reload()	重新载入当前文档 location.reload();
replace()	用新的文档替换当前文档 location.replace(newURL)

assign() 和 replace() 的区别：

window.location.assign(url) ：加载 URL 指定的新的 HTML 文档。就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。

window.location.replace(url) ：通过加载 URL 指定的文档来替换当前文档，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，没有后退返回上一页的。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn1">assign载入一个新的文档</button>
<button id="btn2">reload重新加载文档</button>
<button id="btn3">replace替换当前文档</button>
<script>
// http://127.0.0.1:5500/0715/10_location%E5%AF%B9%E8%B1%A1.html?
userName=zhangsan&&userPwd=123#abc
// url: 协议://ip地址:端口号/资源路径?请求内容(搜索内容)#锚链接

console.log("完整的URL地址:" + location.href);
console.log("协议:" + location.protocol);
console.log("ip地址和端口号:" + location.host);
console.log("ip地址:" + location.hostname)
console.log("端口号:" + location.port);
console.log("完整资源路径:" + location.pathname);
console.log("搜索内容:" + location.search);
console.log("锚部分:" + location.hash);

var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");

btn1.onclick = function () {
location.assign("http://www.baidu.com");
}

btn2.onclick = function () {
location.reload();
}

btn3.onclick = function () {
location.replace("http://www.baidu.com");
}

</script>
</body>
</html>