js定时刷新数据
首先准备一个测试页面:
1 <!--html代码--> 2 <h1 id="test">页面刷新</h1> 3 <button onclick="fresh()">刷新</button
1 //script 2 var h1 = document.getElementById('test'); 3 function test(){ 4 h1.style.color = "red"; 5 h1.innerText = "我变化了"; 6 } 7 setInterval(test, 1000);
准备工作完成,开始页面刷新方法:
1.可以正常使用的五种方法:
1 //第一种方法 2 function fresh(){ 3 window.location.reload();//强迫浏览器刷新当前页面,默认参数为false,表示从客户端缓存里取当前页。如果指定为true,则以GET方式从服务端取最新的页面,相当于客户端点击F5。 4 }
1 //第二种方法 2 function fresh(){ 3 history.go(0); 4 }
1 //第三种方法 2 function fresh(){ 3 location = location; 4 }
1 //第四种方法 2 function fresh(){ 3 location.assign(location);//assign()方法加载一个新的文档。 4 }
1 //第五种方法 2 function fresh(){ 3 location.replace(location);//通过指定URL替换当前缓存在历史里(客户端)的项目,所以使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL。 4 }
2.只在ie可以执行的两种方法:
1 //第六种方法 2 function fresh(){ 3 document.execCommand('Refresh');//是只有IE提供的方法,叫浏览器方法。 4 }
1 //第七种方法 2 function fresh(){ 3 window.navigate(location);//只在ie可以执行,不适用于火狐等其他浏览器。 4 }
3.网上很容易找到,但是个人认为是错误的一种方法:
1 //错误方法 2 function fresh(){ 3 document.URL=location.href;//错误用法,document.URL只能读不能写 4 }
但是也可以有替代的方法:
1 //第八种方法 2 //window.location.href和document.location.href可以被赋值,然后跳转到其它页面 3 //一个窗口下只有一个window.location.href,但是可能有多个document.URL、document.location.href 4 function fresh(){ 5 document.location.href = location.href; 6 //可以使用,document表示的是一个文档对象 7 }
1 //第九种方法(与第八种方法是一类) 2 function fresh(){ 3 window.location.href = location.href;//可以使用,window表示的是一个窗口对象 4 }
如有错误,请您指正!
接下来进入正题-定时不断刷新页面的方法:
1.看到定时,很容易想到js的定时器:
1 //第一种方法 2 //由于我们已经有了一个定时器,所以只要在定时器test中加入一句刷新页面的代码即可 3 function test(){ 4 h1.style.color = "red"; 5 h1.innerText = "我变化了"; 6 history.go(0);//可以换成上一篇博客的任何一种方法。 7 } 8 setInterval(test, 1000);
2.通过meta来设置:
1 <!--第二种方法--> 2 <!--定时自动刷新,content表示刷新间隔,单位为秒s,下面代码表示页面每隔三秒刷新一次--> 3 <meta http-equiv="refresh" content="3">
1 <!--第三种方法--> 2 <!--这种方法实现页面刷新有点投机取巧,这个标签作用是定时跳转,content第一个参数表示间隔时间,单位为秒,第二个参数表示目标网址,但是如果把第二个参数设为#,就会实现页面刷新。--> 3 <meta http-equiv="refresh" content="3;url=#">
如有错误,请您指正!