js实现页面自动刷新,用于需要实时更新页面

责编:menVScode 6/9/2017, 10:56:29 AM 阅读(1940)

下面功能是可以控制时间和手动开启关闭的页面定时自动刷新方法:

        js部分:

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/JavaScript">
	var i=0;
	var timer=null;
	var status='N';

	$(document).ready(function(){ 
	        myFresh();
	}); 

	function myFresh(){
	    if(status=='Y'){
	    	i=0;
	        $("#fresh").html('已关闭自动刷新');
	        $("#timeFresh").html("开启自动刷新");
	        status='N';
	        clearInterval(timer); 
	    }else if(status=='N'){
	        status='Y';
	        $("#fresh").html('第<span id="fresh_desc" style="font-size: 16px; color: red;">0</span>秒,20秒后自动刷新');
	        $("#timeFresh").html("关闭自动刷新");
	         timer=setInterval(function(){
			i++;
			$("#fresh_desc").html(i);      
			if(i==20){       
				clearInterval(timer);
				location.reload();     
			}
	    	},1000);
	    }
	}

	function fresh(){
	    location.reload();
	}
</script>

        html部分:

<div style="margin:50px auto 0;width:360px;">
	<span id="fresh"><span id="fresh_desc" style="font-size: 16px; color: red;">0</span>秒,20秒后自动刷新</span>
    	<button type="button" onclick="myFresh();" id="timeFresh" class='btn btn-mini btn-info'>关闭自动</button>
    	<button type="button" onclick="fresh();" id="" class='btn btn-mini btn-info'>手动刷新</button>
</div>

        这样子就可以实现随意开关自动刷新页面了  。

        

        下面的是不能控制开启关闭的方法,只是自动刷新页面的方法,简单易用,仅供参考。

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

        <meta http-equiv="refresh" content="20">:其中20指每隔20秒刷新一次页面。

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

        <meta http-equiv="refresh" content="20;url=http://www.menvscode.com">其中20指隔20秒后跳转到http://www.menvscode

.com页面

        3、页面自动刷新js版

<script language="JavaScript">function myrefresh(){       window.location.reload();}setTimeout('myrefresh()',1000); //指定1秒刷新一次</script>

        

        js刷新框架的脚本语句:

//如何刷新包含该框架的页面用  
<script language=JavaScript>
   parent.location.reload();
</script>  
//子窗口刷新父窗口
<script language=JavaScript>
    self.opener.location.reload();
</script>
( 或 <a href="javascript:opener.location.reload()">刷新</a>   )
//如何刷新另一个框架的页面用  
<script language=JavaScript>
   parent.另一FrameID.location.reload();
</script>

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

<body onload="opener.location.reload()"> 开窗时刷新
<body onUnload="opener.location.reload()"> 关闭时刷新
<script language="javascript">
    window.opener.document.location.reload()
</script>

来源:http://blog.csdn.net/lplanguage/article/details/52538348

标签: js
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码