JavaScript（七）

最新推荐文章于 2024-10-02 05:39:15 发布

咕噜噜爱喝水

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量189

点赞数

文章标签： javascript 前端其他

本文链接：https://blog.csdn.net/weixin_73646899/article/details/127069276

版权

一、location对象

location 是最有用的 BOM 对象之一，提供了当前窗口中加载文档的信息，以及通常的导航功能。主要是对浏览器url地址相关数据的获取和定义。location的属性不仅可以获取，也可以设置相关属性，部分属性设置后会导致重新加载新的URL。

location.host

作用

返回主机(域名)wwwitheima.con

说明

设置或检索位置或 URL 的主机名和端口号

location.hostname

说明

设置或检索位置或 URL 的主机名部分

location.href

作用

获取或者设置整个URL

说明

设置或检索完整的 URL 字符串

示例:通过改变location对象中href的属性值来实现页面的跳转

<body>
<button>点击</button>
<div></div>
<script>
var btn=document.querySelector('button');
var div = document.querySelector('div');
btn.addEventListener('click', function() {
// console.log(location.href);
location.href = 'http://www.itcast.cn';
})
var timer = 5;
setInterval(function() {
if (timer == 0) {
location.href = 'http://www.baidu.com';
} else {
div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
timer--;
}
}, 1000);
</script>
</body>

获取URL参数:在一个新的页面获取另一个页面
的内容

<body>
<form action="index.html">
用户名： <input type="text" name="uname">
<input type="submit" value="登录">
</form>
</body>

<body>
<div></div>
<script>
console.log(location.search); // ?uname=andy
// 1.先去掉？ substr('起始的位置'，截取几个字符);
var params = location.search.substr(1); // uname=andy
console.log(params);
// 2. 利用=把字符串分割为数组 split('=');
var arr = params.split('=');
console.log(arr); // ["uname", "ANDY"]
var div = document.querySelector('div');
// 3.把数据写入div中
div.innerHTML = arr[1] + '欢迎您';
</script>
</body>

location.assign()

作用

跟href一样，可以跳转页面

说明

加载URL指定的新的 HTML 文档.

location.reload()

作用

制刷新ctrl+f5

说明

重新加载当当前页

location.replace()

作用

替换当前页面，因为不记录!

说明

通过加载URL 指定的文档来替换当前文档

示例：

<body>
<button>点击</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
// 记录浏览历史，所以可以实现后退功能
// location.assign('http://www.baidu.cn');
// 不记录浏览历史，所以不可以实现后退功能
// location.replace('http://www.baidu.cn');
location.reload(true);
})
</script>
</body>

二、History对象

History对象是浏览器模型中的一个对象，表示当前窗口的浏览历史，通过windowhistory获
取。一个浏览器窗口从被打开时开始，所有访问
过的页面地址都会保存在History对象中。若URL的锚点值改变，也会在History中创建一条浏览记录。

history.back()

作用

访问前一个浏览的页面(后退)。(浏览器
浏览器左上角的返回按钮(一)就是调用的此方
法)。

说明

等价于history.go(-1)。
当浏览器处于第一页时调用此方法没有效
果，而且也不会报错。

history.foreward()

作用

访问后一个浏览的页面(前进)。(浏览器
浏览器左上角的前进按钮(一)就是调用的此方
法)。

说明

等价于history.go(1)。

当浏览器处于最顶端时(页面处于最后一页
时)调用此方法没有效果，也不报错。

history.go(num)

作用

跳到基于当前页的指定位置。

示例

//后退一页
history.go(-1);
//前进一页
history.go(1);
//前进两页
history.go(2);

如果num不传，即:history.go()，它等价于 history.go(0)，表示刷新当前页面。

例如：

//刷新当前页面
history.go(0);

注意:IE支持传递URLs作为参数给go0);这在
Gecko是不标准且不支持的。

例如:

//跳转到最近的abc.com 页面 history.go("abc.com");

示例：

<body>
<a href="list.html">点击我去往列表页</a>
<button>前进</button>
<script>
var btn=document.querySelector('button');
btn.addEventListener('click', function() {
// history.forward();
history.go(1);
})
</script>
</body>

<body>
<a href="index.html">点击我去往首页</a>
<button>后退</button>
<script>
var btn=document.querySelector('button');
btn.addEventListener('click', function() {
// history.back();
history.go(-1);
})
</script>
</body>