History、Location

朱雀 2024-03-31 13:15 54阅读 0赞

## History、Location ##

**学习路线**：[JavaScript基础语法（输出语句）][JavaScript]\->[JavaScript基础语法（变量）][JavaScript 1]\->[JavaScript基础语法（数据类型）][JavaScript 2]\->[JavaScript基础语法（运算符）][JavaScript 3]\->[JavaScript基础语法（流程控制语句）][JavaScript 4]\->[JavaScript基础语法（类型转换）][JavaScript 5]\->[JavaScript基础语法（函数）][JavaScript 6]\->[Array\_JavaScript][Array_JavaScript]\->[String\_JavaScript][String_JavaScript]\->[自定义对象\_JavaScript][JavaScript 7]\->[JavaScript\_BOM][JavaScript_BOM]\->[Window对象][Window]\->[confirm()、setInterval()、setTimeout()][confirm_setInterval_setTimeout]\->[History、Location][History_Location]\->[闪烁的灯泡][Link 1]\->[JavaScript\_DOM][JavaScript_DOM]\->[事件绑定(onclick,onfocus,onblur)][onclick_onfocus_onblur]\->  
[事件绑定(onmouseout,onmouseover)  
][onmouseout_onmouseover_]\->[事件绑定(onsubmit)表单提交  
][onsubmit_]\->[提交表单与验证表单案例  
][Link 2]

### History ###

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

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

![在这里插入图片描述][7ffdca05a25049d687e8d7e7e771e285.png]  
**演示代码**

<!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>

**运行结果**  
![在这里插入图片描述][da0bd9ecef6c4e06a0a4a1e483ae7ab2.png]

### Location ###

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

#### 获取Location对象 ####

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

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

#### Location对象属性 ####

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

![在这里插入图片描述][182173f6cc404e639699f75957593a9c.png]

**代码演示：**

<!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>

#### 案例 ####

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

**分析：**

1.  3秒跳转，由此可以确定需要使用到定时器，而只跳转一次，所以使用 `setTimeOut()`
2.  要进行页面跳转，所以需要用到 `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>

[JavaScript]: https://blog.csdn.net/qq_51447496/article/details/128085137
[JavaScript 1]: https://blog.csdn.net/qq_51447496/article/details/128085348
[JavaScript 2]: https://blog.csdn.net/qq_51447496/article/details/128086148
[JavaScript 3]: https://blog.csdn.net/qq_51447496/article/details/128086681
[JavaScript 4]: https://blog.csdn.net/qq_51447496/article/details/128088817
[JavaScript 5]: https://blog.csdn.net/qq_51447496/article/details/128087248
[JavaScript 6]: https://blog.csdn.net/qq_51447496/article/details/128088986
[Array_JavaScript]: https://blog.csdn.net/qq_51447496/article/details/128089474
[String_JavaScript]: https://blog.csdn.net/qq_51447496/article/details/128089631
[JavaScript 7]: https://blog.csdn.net/qq_51447496/article/details/128089766
[JavaScript_BOM]: https://editor.csdn.net/md/?articleId=128095193
[Window]: https://blog.csdn.net/qq_51447496/article/details/128095300
[confirm_setInterval_setTimeout]: https://blog.csdn.net/qq_51447496/article/details/128103458
[History_Location]: https://blog.csdn.net/qq_51447496/article/details/128104240
[Link 1]: https://blog.csdn.net/qq_51447496/article/details/128095524
[JavaScript_DOM]: https://blog.csdn.net/qq_51447496/article/details/128104720
[onclick_onfocus_onblur]: https://blog.csdn.net/qq_51447496/article/details/128110532
[onmouseout_onmouseover_]: https://blog.csdn.net/qq_51447496/article/details/128112439
[onsubmit_]: https://blog.csdn.net/qq_51447496/article/details/128112553
[Link 2]: https://blog.csdn.net/qq_51447496/article/details/128112770
[7ffdca05a25049d687e8d7e7e771e285.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/e3a7702db5894c54b31b77e7bc0dfcdc.png
[da0bd9ecef6c4e06a0a4a1e483ae7ab2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/c4eaba0062e34b28ac92f19084c3fd40.png
[182173f6cc404e639699f75957593a9c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/2e7de20bc74d47c0bd40b74f18b43014.png

History、Location

发表评论取消回复

还没有评论，来说两句吧...

相关阅读