javascript页面自动刷新，然后调用函数

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript页面自动刷新，然后调用函数相关的知识，希望对你有一定的参考价值。

我有一个html页面，用来显示两个图表（highcharts），代码在下面，页面一次只显示一张图表， 我想要10秒页面自动刷新一次，然后 更换一次图表（用block？）。
请问如何实现，具体代码谢谢

<div id="g1" style="width: 710; height: 510; border: 1px solid gray; border-radius: 10px">
<div style="width: 10; height: 5"></div>
<div id="graph3" style="width: 700; height: 500"></div>
</div>

<div id="g2" style="width: 710; height: 510; border: 1px solid gray; border-radius: 10px">
<div style="width: 10; height: 5"></div>
<div id="graph4" style="width: 700; height: 500"></div>
</div>

运用计时器和style样式配合

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#g1,#g2width: 710px; height: 510px; border: 1px solid gray; border-radius: 10px
#g1 .box1,#g2 .box1width: 10px;height: 5px;
#graph3,#graph4width: 700px;height: 500px;
#g2display: none;
</style>
</head>
<body>
<div id="g1">
<div class=\'box1\'>1</div>
<div id="graph3">1</div>
</div>
<div id="g2">
<div  class=\'box1\'>2</div>
<div id="graph4">2</div>
</div>
</body>
<script>
var g1 = document.getElementById(\'g1\');
var g2 = document.getElementById(\'g2\');
var timer = null;
var a = true;
function change()
if (a) 
g1.style.display = \'block\';
g2.style.display = \'none\';
a = false;
else
g1.style.display = \'none\';
g2.style.display = \'block\';
a = true;


timer = setInterval(change,10000);
</script>
</html> 参考技术A 我就给你JS代码。

<script>
function loadi()
//在这里写你要做的事



window.onload=function()
setInterval(loadi,1000*10);

</script>

打开页面自动刷新网页,自动刷新当前页面,JS调用

reload 方法，该方法强迫浏览器刷新当前页面。
语法：location.reload([bForceGet])     

参数： bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5("刷新")

 

replace 方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，你不能通过“前进”和“后退”来访问已经被替换的URL。

语法： location.replace(URL)  

在实际应用的时候，重新刷新页面的时候，我们通常使用： location.reload() 或者是 history.go(0) 来做。因为这种做法就像是客户端点F5刷新页面，所以页面的method="post"的时候，会出现"网页过期"的提示。那是因为Session的安全保护机制。可以想到： 当调用 location.reload() 方法的时候， aspx页面此时在服务端内存里已经存在， 因此必定是 IsPostback 的。如果有这种应用： 我们需要重新加载该页面，也就是说我们期望页面能够在服务端重新被创建， 我们期望是 Not IsPostback 的。这里，location.replace() 就可以完成此任务。被replace的页面每次都在服务端重新生成。

你可以这么写： location.replace(location.href);

 

返回并刷新页面：

 

代码如下：

location.replace(document.referrer);

document.referrer//前一个页面的URL

不要用history.go(-1),或history.back();来返回并刷新页面，这两种方法不会刷新页面。

 

自动刷新页面的方法:

1、页面自动刷新：把下面代码加入<head>区域中

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

其中20指的是每隔20秒刷新一次页面。

2、页面自动跳转：把如下代码加入<head>区域中

<meta http-equiv="refresh"content="20;url=http://www.jb51.net">

其中20指隔20秒后跳转到http://www.jb51.net页面

3、页面自动刷新js版

代码如下：

<script>

　　function myrefresh(){

　　　　window.location.reload();

}

setTimeout(‘myrefresh()‘,1000);//指定1秒刷新一次

</script>

JS刷新框架的脚本语句

//如何刷新包含该框架的页面用

代码如下:

<script language=JavaScript>

parent.location.reload();

</script>

//子窗口刷新父窗口

<script>

self.opener.location.reload();

</script>

(或<a href="javascript:opener.location.reload()">刷新</a>)

//如何刷新另一个框架的页面用

<script>

parent.另一个FrameId.location.reload();

</script>

如果想关闭窗口时刷新或者打开窗口时刷新的话，在<body>中调用以下语句即可。

代码如下：

<body onload="opener.location.reload()">开窗时刷新

<body onUdload="opener.location.reload()">关闭时刷新

 

<script>

window.opener.document.location.reload()

</script>

附：

JavaScript刷新页面的几种办法：

代码如下：

history.go(0)

location.reload()

location=location

location.assign(location)

document.execCommand(‘Refresh‘)

window.navigate(location)

location.replace(location)

document.URL=location.href

 


以上是关于javascript页面自动刷新，然后调用函数的主要内容，如果未能解决你的问题，请参考以下文章

打开页面自动刷新网页,自动刷新当前页面,JS调用

Javascript实现页面加载完成后自动刷新一遍清除缓存文件

HTML 页面刷新问题

uniapp微信小程序切换到tabber页面没有自动刷新

如何使用 php 或 javascript 在不刷新页面的情况下自动更新 JSON 数据？

自动刷新页面调用 web 服务