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

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

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

废话，不多说，直接看代码：1.html

<!DOCTYPE html>

<html>

	<head>

		<title>1.html</title>

		<meta charset="utf-8" />

		<style type="text/css">

			*{font-size:12px;}

			a{display:block;color:#D8450B;text-decoration:none;line-height:30px;}

			a:hover{text-decoration:underline;}

		</style>

	</head>

	<body>

		<p>当前页面：1.html</p>

		<a href="2.html">返回上一页：跳到2.html</a>

		<a href="3.html">自动刷新当前页面：跳到3.html</a>

		<a href="4.html">若干秒后跳转到其它页面：跳到4.html</a>

		<a href="javascript:location.reload();">重新加载本页面，方法1：location.reload()</a>

		<a href="javascript:history.go(0);">重新加载本页面，方法2：history.go(0)</a>

		<a href="javascript:location=location">重新加载本页面，方法3：location=location</a>

		<a href="javascript:location.assign(location)">重新加载本页面，方法4：location.assign(location)</a>

		<a href="javascript:document.execCommand('Refresh')">重新加载本页面，方法5（只支持IE浏览器）：document.execCommand('Refresh')</a>

		<a href="javascript:window.navigate(location)">重新加载本页面，方法6（只支持IE浏览器）：window.navigate(location)</a>

		<a href="javascript:location.replace(location)">重新加载本页面，方法7：location.replace(location)</a>

		<a href="javascript:location.href=document.URL">重新加载本页面，方法8：location.href=document.URL</a>

		<script type="text/javascript">

			document.write( '随机数：' + Math.round(Math.random()*100));

		</script>

	</body>

</html>

文件2.html：

<!DOCTYPE html>

<html>

	<head>

		<title>2.html</title>

		<meta charset="utf-8" />

		<style type="text/css">

			*{font-size:12px;}

			a{display:block;color:#D8450B;text-decoration:none;line-height:30px;}

			a:hover{text-decoration:underline;}

		</style>

	</head>

	<body>

		<p>当前页面：2.html</p>

		<a href="javascript:history.go(-1)">返回上一页，方法1：history.go(-1)</a>

		<a href="#" onclick="self.location=document.referrer;">返回上一页，方法2：self.location=document.referrer;</a>

		<a href="javascript:history.back()">返回上一页，方法3：history.back()</a>

		<a href="javascript:history.go(-1);location.reload()">返回上一页面，并重新加载上一页面</a>

	</body>

</html>

页面3.html

<!DOCTYPE html>

<html>

	<head>

		<title>3.html</title>

		<meta charset="utf-8" />

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

		<style type="text/css">

			*{font-size:12px;}

			a{display:block;color:#D8450B;text-decoration:none;line-height:30px;}

			a:hover{text-decoration:underline;}

		</style>

	</head>

	<body>

		<p>当前页面：3.html</p>

		<p>本页面自动刷新，5秒刷新一次</p>

		<a href="1.html">1.html</a>

		<script type="text/javascript">

			document.write( '随机数：' + Math.round(Math.random()*100));

			function myRefresh()

				location.reload();

			//	这是第二种方法，使用setTimeout()方法调用刷新页面函数

			//	setTimeout('myRefresh()',5000);	//	5秒自动加载当前页面

		</script>

	</body>

</html>

页面4.html：

<!DOCTYPE html>

<html>

	<head>

		<title>4.html</title>

		<meta charset="utf-8" />

		<meta http-equiv="refresh" content="5;url=1.html">

		<style type="text/css">

			*{font-size:12px;}

		</style>

	</head>

	<body>

		<p>当前页面：4.html</p>

		<p>本页面5秒后跳转到1.html</p>

		<a href="1.html">1.html</a>

		<script type="text/javascript">

			function myChange()

				location.href = '1.html';

			//	这是第二种方法，使用setInterval()方法调用刷新页面函数

			//	setInterval('myChange()',5000);	//	5秒执行myChange()

		</script>

	</body>

</html>

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

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

顶0

踩0