js 刷新当前页面的方法 reload() , replace()的简单使用

天命爱心职责~

已于 2022-02-08 11:12:40 修改

阅读量9k

点赞数 3

分类专栏： vue.js JavaScript 文章标签： javascript 前端

于 2022-01-11 15:41:03 首次发布

本文链接：https://blog.csdn.net/m0_62021563/article/details/122415874

版权

JavaScript 同时被 2 个专栏收录

12 篇文章 3 订阅

订阅专栏

vue.js

10 篇文章 0 订阅

订阅专栏

本文为大家介绍三种 js 刷新当前页面的方法，我是在vue实例下写的：

添加定时器是为了直观看到刷新效果（每次刷新都会重置为0）；

reload() 方法;

replace() 方法;

页面自动刷新;

reload() 方法

reload()方法用于刷新当前文档。

reload() 方法类似于你浏览器上的刷新页面按钮。

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onload()</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<body>
    <div id="demo">
        <h1>{{number}}</h1>
        <button @click='reloadPage()'>重新加载页面</button>
    </div>
</body>
<script>
    var demo = new Vue({
        el: '#demo',
        data: {
            number: 0
        },
        created() {
            this.add();
        },
        methods: {
            // 为了让刷新更直观，定时器的时间是随机的（80-380）： Math.floor(Math.random() * 300 + 80)
            add() {
                var that = this;
                var timer = setInterval(function () {
                    that.number++
                }, Math.floor(Math.random() * 300 + 80))
            },
            reloadPage() {
                location.reload()
            }
        }
 })

</script>
</html>

效果：（每次点击，都会刷新页面重新计数）

replace()方法

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>replace()</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>

    <div id="demo">
        <h1>初始页面</h1>
        <button @click='replaceDoc()'>重新加载页面</button>
    </div>
</body>
<script>  
 var demo = new Vue({
    el:'#demo', 
    data:{ 
        number:0
    },
    created(){

     },
     methods: {
        replaceDoc(){
    window.location.replace("https://www.csdn.net/")
    // window.location.href="https://www.csdn.net/"
}
     }
 })
</script>
</html>

效果：

在这里可能会有疑惑，这不就是页面跳转吗？
当我把上面代码中的：

window.location.replace("https://www.csdn.net/")

更改为：

window.location.href="https://www.csdn.net/"

那确实就是页面跳转了， replace()就是刷新，只是重定向到指定的页面了，嗯，我知道还不够有说服力,,,

location.href 通常被用来跳转到指定页面地址,强调跳转，会留下新的历史记录，可以通过“前进”和“后退”来切换URL；

location.replace方法可以实现用新的文档替换当前文档，强调替换在历史记录中，强迫浏览器将指定的URL替换掉缓存在历史记录中的URL，通俗来说一直是这一项历史记录，并不会增加新的，也就不能通过“前进”和“后退”来切换URL了。一定遇到过，“页面超时过期”这样的情况吧，一般就用location.replace方法，这样更像是客户端F5刷新界面，当页面的method="post"的时候，也就是向服务器传送数据的时候，出现“网页过期”提示，这是Session的安全保护机制。

页面自动刷新

自动刷新比较简单只需要在head标签中添加一个meta标签：content属性设置自动刷新时间间隔。

<meta http-equiv="refresh" content="3">

完整代码：

<!DOCTYPE html>
<html lang="en">
<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">
    <meta http-equiv="refresh" content="3">
    <title>自动刷新</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="demo">
        <h1>{{number}}</h1>
    </div>

    <script type="text/javascript" > 
         var demo = new Vue({
            el:'#demo', 
            data:{ 
                number:0
            },
            created(){
                this.add();
            },
            methods:{
                add(){
                    var that = this;
                    var timer=setInterval(function () {
                            that.number++
						}, Math.floor (Math.random()*300+80))
                }
            }
        })
    </script>
</body>
</html>

效果：（每隔3秒，都会刷新页面重新计数）