关于前端刷新当前页面的方法总结

最新推荐文章于 2024-05-14 15:00:16 发布

Alone_in_

最新推荐文章于 2024-05-14 15:00:16 发布

阅读量1.2w

点赞数 4

分类专栏： # 前端

本文链接：https://blog.csdn.net/Alone_in_/article/details/94397380

版权

前端专栏收录该内容

24 篇文章 5 订阅

订阅专栏

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">

<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>

Alone_in_

关注

4
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
关于前端刷新当前页面的方法总结

js 刷新当前页面今天想总结一下之前学到的三种刷新方法：reload() 方法;replace() 方法;页面自动刷新;一、reload() 方法reload()方法用于刷新当前文档。reload() 方法类似于浏览器上的刷新页面按钮。语法：location.reload(forceGet)参数forceGet类型Boolean描述可选。默认为...
复制链接

扫一扫