location对象
triumph
Bom对象location对象方法
1.更改URL
| 方法 | 说明 |
|---|---|
| assign() | 载入一个新文档 |
| reload() | 绕过缓存载入当前的文档 |
| replace() | 替换当前文档 |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>location对象</title>
</head>
<body>
<input type="button" value="载入新文档" onclick="newPage()"></input>
<input type="button" value="刷新页面" onclick="refreshPage()"></input>
<input type="button" value="替换当前内容" onclick="replacePage()"></input>
<div id="time"></div>
</body>
</html>
<script>
/* 获取并显示当前载入时间*/
const obDate = new Date(),
nowDate = obDate.getDate();
const nowTime = obDate.toLocaleTimeString();
document.getElementById('time').innerHTML = nowTime;
/**
* 载入新文档
*/
function newPage() {
window.location.assign("http://127.0.0.1:5500/index.htm");
}
/**
* 绕过缓存刷新页面
*/
function freshPage() {
location.reload(true); //“(forcedReload: boolean): void”已被弃用ts(6385)
/*Location.reload() 该方法只有一个参数，当变化true时，将强制浏览器从服务器加载页面资源，当变为或未false传参时，浏览器则可能从缓存中读取页面。
该方法在跨域调用（执行该方法的脚本文件的域和Location对象位于页面的跨不同）时，将会引发 DOMException异常。*/
}
/**
* 替换当前页内容
*/
function replacePage() {
location.replace("https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes");
}
</script>
2.获取url参数
location属性名的方式，即可获取当前用户访问url的指定部分。 通过location属性名 = 值的方式可以改变当前加载的页面。
| 属性 | 说明 |
|---|---|
| hash | 返回一个url锚部分 |
| host | 返回一个url的主机名和端口 |
| hostname | 返回url的主机名 |
| href | 返回完整的url |
| pathname | 返回url路径名 |
| prot | 返回url服务器使用的端口号 |
| protocol | 返回一个url协议 |