js刷新当前页面
今天想总结一下之前学到的常用三种刷新方法:
- reload()方法;
- replace()方法;
- 页面自动刷新;
一,reload ( ) 方法
reload()方法用于刷新当前文档。
reload() 方法类似于你浏览器上的刷新页面按钮。
语法:location.reload(forceGet)
参数 | forceGet |
---|---|
类型 | 布尔 |
描述 | 可选。默认为 false,从客户端缓存里取当前页。如果把该方法的参数设置为 true,那么无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>小白网页</title>
<script type="text/javascript">
function fresh(){
location.reload();
}
setTimeout('Refresh()',1000); //1秒刷新一次
</script>
</head>
<body>
<input onclick="fresh()" type="button" value="页面刷新(F5)">
</body>
</html>
二,replace() 方法
replace() 方法可用一个新文档取代当前文档。
语法:location.replace(newURL)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>小白网页</title>
<script>
function replaceDoc()
{
window.location.replace("http://www.baidu.com")
}
</script>
</head>
<body>
<input type="button" value="载入新文档替换当前页面" onclick="replaceDoc()">
</body>
</html>
三,页面自动刷新
页面自动刷新:把如下代码加入区域中
<meta http-equiv="refresh" content="5">
or
<meta http-equiv="Refresh" content="5;url=http://www.baidu.com" />
其中5指每隔5秒刷新一次页面。
扩展:
(1)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript">
function goUrl()
{
var url="http://www.baidu.com/";
location.href=url;
}
</script>
</head>
<body onload="setTimeout('goUrl()', 1000);"> <!--1秒钟后页面自动跳转到http://www.cnblogs.com/lihuibin-->
</body>
</html>
(2)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
var t=10;
setInterval("refer()",1000);
function refer(){
if(t==0){
location.href="//www.baidu.com/";
}
document.getElementById('show').innerHTML=""+t+"秒后跳转到百度";
t--;
}
</script>
<body>
<span id="show"></span>
</body>
</head>
</html>
(3)
如果想使用图片按钮,但又不想点击按钮后页面自动刷新;那么就用button然后设置按钮的背景图
<input type="button" style="background:url(...);"/>
如果想使用图片按钮,且允许自动刷新页面可以用
<input type="image" src="..." />
(4)
下面以三个页面分别命名为frame.html、top.html、bottom.html为例来具体说明如何做。
frame.html 由上(top.html)下(bottom.html)两个页面组成,代码如下:
复制代码代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> frame </TITLE>
</HEAD>
<frameset rows="50%,50%">
<frame name=top src="top.html">
<frame name=bottom src="bottom.html">
</frameset>
</HTML>
现在假设top.html (即上面的页面) 有七个button来实现对bottom.html (即下面的页面) 的刷新,可以用以下七种语句,哪个好用自己看着办了。
top.html 页面的代码如下:
复制代码代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> top.html </TITLE>
</HEAD>
<BODY>
<input type=button value="刷新1" onclick="window.parent.frames[1].location.reload()"><br>
<input type=button value="刷新2" onclick="window.parent.frames.bottom.location.reload()"><br>
<input type=button value="刷新3" onclick="window.parent.frames['bottom'].location.reload()"><br>
<input type=button value="刷新4" onclick="window.parent.frames.item(1).location.reload()"><br>
<input type=button value="刷新5" onclick="window.parent.frames.item('bottom').location.reload()"><br>
<input type=button value="刷新6" onclick="window.parent.bottom.location.reload()"><br>
<input type=button value="刷新7" onclick="window.parent['bottom'].location.reload()"><br>
</BODY>
</HTML>
下面是bottom.html页面源代码,为了证明下方页面的确被刷新了,在装载完页面弹出一个对话框。
复制代码代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> bottom.html </TITLE>
</HEAD>
<BODY onload="alert('我被加载了!')">
<h1>This is the content in bottom.html.</h1>
</BODY>
</HTML>
(5)History 对象方法
方法 | 说明 |
---|---|
back() | 加载 history 列表中的前一个 URL |
forward() | 加载 history 列表中的下一个 URL |
go() | 加载 history 列表中的某个具体页面 |
history.go()和history.back()的用法和区别 :
go(-1): 返回上一页,原页面表单中的内容会丢失;history.go(-1):后退+刷新;history.go(1) :前进
back(): 返回上一页,原页表表单中的内容会保留; history.back():后退 ; history.back(0) 刷新; history.back(1):前进
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>小白教程</title>
<script>
function goGO(){
window.history.go(-2)
}
function goForward(){
window.history.forward()
}
function goBack(){
window.history.back()
}
</script>
</head>
<body>
<input type="button" value="后退2页" onclick="goGO()">
<input type="button" value="前进" onclick="goForward()">
<input type="button" value="返回" onclick="goBack()">
</body>
</html>