JavaScript本地对象常用方法(六)——history对象和location对象

最新推荐文章于 2022-09-26 22:02:09 发布

krtuartier

最新推荐文章于 2022-09-26 22:02:09 发布

阅读量1.8k

点赞数 1

分类专栏： JavaScript 文章标签： javascript history对象 location对象常用方法

本文链接：https://blog.csdn.net/krtuartier/article/details/74068871

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

history对象和location对象的常用方法

一、history对象的常用方法
forward()、back()、go()
forward()相当于浏览器的前进按钮
back()相当于浏览器的后退按钮
go(参数)前往参数的历史位置,正数往前,负数往后
demo如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            a{
                display: block;
                float: left;
                margin-right: 20px;
                padding: 5px;
                border: 2px solid #D12147;
            }
            .btn{
                cursor: pointer;
                background:cornflowerblue;
                color:#D0011B;
            }
        </style>
    </head>
    <body>
        <a class="page" href="#page1">第一页</a>
        <a class="page" href="#page2">第二页</a>
        <a class="page" href="#page3">第三页</a>
        <a class="btn" onclick="history.forward()">历史前进</a>
        <a class="btn" onclick="history.back()">历史后退</a>
        <input type="text" name="" id="goHistory" value="" />
        <input type="button" id="goHistoryBtn" value="前往历史" onclick="history.go(goHistory.value)"/>
    </body>
</html>

先按’第一页’、’第二页’、’第三页’切换location的hash属性,改变浏览器地址栏的显示
点击’历史前进’和’历史后退’可进行切换改变浏览器上方url的hash
在输入框输入数字,再按’前往历史’可前往到,之前点击所改变范围内的历史hash
二、location对象的常用方法
1.assign()
assign(参数)加载新的网址,参数为url

location.assign('about:blank');//加载一个新的空白页

2.reload()
reload()重新加载当前页面

location.reload();//重新加载当前页面

3.replace()
replace(参数)加载一个页面替换当前页面,参数为url

location.replace('about:blank');//加载一个空白页替换当前页面

krtuartier

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录