马富天PHP博客

js刷新当前页面的8种方法

学习笔记 马富天 2016-07-25 10:09:41 19 1

【摘要】本文整理的js中实现当前页面重新加载的8种方法,两种页面自动刷新的方法,两种返回上一页面的方法。

废话,不多说,直接看代码:1.html

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<title>1.html</title>
  5. 		<meta charset="utf-8" />
  6. 		<style type="text/css">
  7. 			*{font-size:12px;}
  8. 			a{display:block;color:#D8450B;text-decoration:none;line-height:30px;}
  9. 			a:hover{text-decoration:underline;}
  10. 		</style>
  11. 	</head>
  12. 	<body>
  13. 		<p>当前页面:1.html</p>
  14. 		<a href="2.html">返回上一页:跳到2.html</a>
  15. 		<a href="3.html">自动刷新当前页面:跳到3.html</a>
  16. 		<a href="4.html">若干秒后跳转到其它页面:跳到4.html</a>
  17. 		<a href="javascript:location.reload();">重新加载本页面,方法1:location.reload()</a>
  18. 		<a href="javascript:history.go(0);">重新加载本页面,方法2:history.go(0)</a>
  19. 		<a href="javascript:location=location">重新加载本页面,方法3:location=location</a>
  20. 		<a href="javascript:location.assign(location)">重新加载本页面,方法4:location.assign(location)</a>
  21. 		<a href="javascript:document.execCommand('Refresh')">重新加载本页面,方法5(只支持IE浏览器):document.execCommand('Refresh')</a>
  22. 		<a href="javascript:window.navigate(location)">重新加载本页面,方法6(只支持IE浏览器):window.navigate(location)</a>
  23. 		<a href="javascript:location.replace(location)">重新加载本页面,方法7:location.replace(location)</a>
  24. 		<a href="javascript:location.href=document.URL">重新加载本页面,方法8:location.href=document.URL</a>		
  25. 		<script type="text/javascript">				
  26. 			document.write( '随机数:' + Math.round(Math.random()*100));
  27. 		</script>
  28. 	</body>
  29. </html>

文件2.html:

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<title>2.html</title>
  5. 		<meta charset="utf-8" />
  6. 		<style type="text/css">
  7. 			*{font-size:12px;}
  8. 			a{display:block;color:#D8450B;text-decoration:none;line-height:30px;}
  9. 			a:hover{text-decoration:underline;}
  10. 		</style>		
  11. 	</head>
  12. 	<body>		
  13. 		<p>当前页面:2.html</p>
  14. 		<a href="javascript:history.go(-1)">返回上一页,方法1:history.go(-1)</a>
  15. 		<a href="#" onclick="self.location=document.referrer;">返回上一页,方法2:self.location=document.referrer;</a> 
  16. 		<a href="javascript:history.back()">返回上一页,方法3:history.back()</a> 
  17. 		<a href="javascript:history.go(-1);location.reload()">返回上一页面,并重新加载上一页面</a>
  18. 	</body>
  19. </html>

页面3.html

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<title>3.html</title>
  5. 		<meta charset="utf-8" />
  6. 		<meta http-equiv="refresh" content="5"> 
  7. 		<style type="text/css">
  8. 			*{font-size:12px;}
  9. 			a{display:block;color:#D8450B;text-decoration:none;line-height:30px;}
  10. 			a:hover{text-decoration:underline;}
  11. 		</style>		
  12. 	</head>
  13. 	<body>		
  14. 		<p>当前页面:3.html</p>
  15. 		<p>本页面自动刷新,5秒刷新一次</p>
  16. 		<a href="1.html">1.html</a>
  17. 		<script type="text/javascript">		
  18. 			document.write( '随机数:' + Math.round(Math.random()*100));
  19. 			function myRefresh()
  20. 			{
  21. 				location.reload();
  22. 			}
  23. 			//	这是第二种方法,使用setTimeout()方法调用刷新页面函数
  24. 			//	setTimeout('myRefresh()',5000);	//	5秒自动加载当前页面
  25. 		</script>
  26. 	</body>
  27. </html>

页面4.html:

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<title>4.html</title>
  5. 		<meta charset="utf-8" />
  6. 		<meta http-equiv="refresh" content="5;url=1.html">
  7. 		<style type="text/css">
  8. 			*{font-size:12px;}
  9. 		</style>		
  10. 	</head>
  11. 	<body>		
  12. 		<p>当前页面:4.html</p>
  13. 		<p>本页面5秒后跳转到1.html</p>
  14. 		<a href="1.html">1.html</a>
  15. 		<script type="text/javascript">
  16. 			function myChange()
  17. 			{
  18. 				location.href = '1.html';
  19. 			}
  20. 			//	这是第二种方法,使用setInterval()方法调用刷新页面函数
  21. 			//	setInterval('myChange()',5000);	//	5秒执行myChange()		
  22. 		</script>		
  23. 	</body>
  24. </html>

页面1.html的截图,可直接将如上4个页面的代码复制到本地,可直接执行查看效果。

请输入图片名称

版权归 马富天PHP博客 所有

本文标题:《js刷新当前页面的8种方法》

本文链接地址:http://www.mafutian.net/174.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

0

0

上一篇《 单个页面中PHP连接MySQL数据的基本操作 》 下一篇《 PHP解决MySQL数据库导出到csv中身份证号码不能完全显示问题 》
分享到:

所有评论

  1. 首页
  2. 上一页
  3. 1
  4. 下一页
  5. 尾页
  6. 第1页
  7. 每页12条
  8. 共1页
  9. 共1条
评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码