History、Location

学习路线：JavaScript基础语法（输出语句）->JavaScript基础语法（变量）->JavaScript基础语法（数据类型）->JavaScript基础语法（运算符）->JavaScript基础语法（流程控制语句）->JavaScript基础语法（类型转换）->JavaScript基础语法（函数）->Array_JavaScript->String_JavaScript->自定义对象_JavaScript->JavaScript_BOM->Window对象->confirm()、setInterval()、setTimeout()->History、Location->闪烁的灯泡->JavaScript_DOM->事件绑定(onclick,onfocus,onblur)->
事件绑定(onmouseout,onmouseover)
->事件绑定(onsubmit)表单提交
->提交表单与验证表单案例

History

History 对象是 JavaScript 对历史记录进行封装的对象。

History 对象的获取

使用 window.history获取，其中window. 可以省略
History 对象的函数

在这里插入图片描述
演示代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function goBack(){ // 该函数运行的时候可以返回前一个页面
    window.history.back()
}
function goForword(){  // 该函数运行的时候可以返回后一个页面 
    window.history.forward()
}
</script>
</head>
<body>

<input type="button" value="返回" onclick="goBack()"> 

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

运行结果
在这里插入图片描述

Location

Location 对象是 JavaScript 对地址栏封装的对象。可以通过操作该对象，跳转到任意页面。

获取Location对象

使用 window.location获取，其中window. 可以省略

window.location.方法();
location.方法();
1
2

Location对象属性

Location对象提供了很对属性。以后常用的只有一个属性 href

在这里插入图片描述

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript演示</title>
</head>
<body>

<script>    
    alert("要跳转了"); // 当我们点击确定之后就会发生跳转
    location.href = "https://www.baidu.com";    
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

案例

需求：3秒跳转到百度首页

分析：

3秒跳转，由此可以确定需要使用到定时器，而只跳转一次，所以使用 setTimeOut()
要进行页面跳转，所以需要用到 location 对象的 href 属性实现

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript演示</title>
</head>
<body>

<script>    
    document.write("3秒跳转到首页..."); 
    setTimeout(function (){
        location.href = "https://www.baidu.com"
    },3000);   
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

相关阅读:
nginx的安装使用以及转发路径总结
【JVM故障问题排查心得】「内存诊断系列」JVM内存与Kubernetes中pod的内存、容器的内存不一致所引发的OOMKilled问题总结（上）
java基础面试
SG-Former实战：使用SG-Former实现图像分类任务（一）
1.1_1 计算机网络的概念、功能、组成和分类
MySQL的结构化语言 DDL DML DQL DCL
C#值传递与引用传递的区别和用法
【windows Docker 安装mysql：只需3条命令】
嵌入式Linux入门-彻底理解UART串口，手把手教你写程序
2024年小程序云开发CMS内容管理无法使用，无法同步内容模型到云开发数据库的解决方案，回退老版本CMS内容管理的最新方法

原文地址：https://blog.csdn.net/qq_51447496/article/details/128104240