js刷新页面

如何实现刷新当前页面呢?借助js你将无所不能。

1,reload 方法,该方法强迫浏览器刷新当前页面。 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页。true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5("刷新")

2,replace 方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过“前进”和“后退”来访问已经被替换的URL。 语法: location.replace(URL) 通常使用: location.reload() 或者是 history.go(0) 来做。 此方法类似客户端点F5刷新页面,所以页面method="post"时,会出现"网页过期"的提示。 因为Session的安全保护机制。 当调用 location.reload() 方法时, aspx页面此时在服务端内存里已经存在, 因此必定是 IsPostback 的。 如果有这种应用: 需要重新加载该页面,也就是说期望页面能够在服务端重新被创建,期望是 Not IsPostback 的。 这里,location.replace() 就可以完成此任务。被replace的页面每次都在服务端重新生成。 代码: location.replace(location.href); 返回并刷新页面:

location.replace(document.referrer); document.referrer //前一个页面的URL

不要用 history.go(-1),或 history.back();来返回并刷新页面,这两种方法不会刷新页面。 附:

Javascript刷新页面的几种方法:

复制代码代码如下:

1,history.go(0) 2,location.reload() 3,location=location 4,location.assign(location) 5,document.execCommand('Refresh') 6,window.navigate(location) 7,location.replace(location) 8,document.URL=location.href

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

代码如下:

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

其中20指每隔20秒刷新一次页面. 2,页面自动跳转:把如下代码加入<head>区域中

代码如下:

<meta http-equiv="refresh" content="20;url=http://www.jb51.net">

其中20指隔20秒后跳转到http://www.jb51.net页面 3,页面自动刷新js版

代码如下:

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

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

一、先来看一个简单的例子: 下面以三个页面分别命名为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> 

解释一下: 代码如下:

1.window指代的是当前页面,例如对于此例它指的是top.html页面。 2.parent指的是当前页面的父页面,也就是包含它的框架页面。例如对于此例它指的是framedemo.html。 3.frames是window对象,是一个数组。代表着该框架内所有子页面。 4.item是方法。返回数组里面的元素。 5.如果子页面也是个框架页面,里面还是其它的子页面,那么上面的有些方法可能不行。 附: Javascript刷新页面的几种方法: 1 history.go(0) 2 location.reload() 3 location=location 4 location.assign(location) 5 document.execCommand('Refresh') 6 window.navigate(location) 7 location.replace(location) 8 document.URL=location.href

二、自动刷新页面 1.页面自动刷新:把如下代码加入<head>区域中 <meta http-equiv="refresh" content="20"> 其中20指每隔20秒刷新一次页面. 2.页面自动跳转:把如下代码加入<head>区域中 <meta http-equiv="refresh" content="20;url=http://www.jb51.net"> 其中20指隔20秒后跳转到http://www.jb51.net页面 3.页面自动刷新js版

三、java在写Servler,Action等程序时,要操作返回页面的话(如谈出了窗口,操作完成以后,关闭当前页面,刷新父页面)

代码如下:

1 PrintWriter out = response.getWriter(); 
2 out.write("<script type=\"text/javascript\">"); 
3 ////子窗口刷新父窗口 
4 out.write("self.opener.location.reload();"); 
5 //关闭窗口 
6 out.write("window.opener=null;"); 
7 out.write("window.close();"); 
8 out.write("</script>"); 

四、JS刷新框架的脚本语句 1.如何刷新包含该框架的页面用

代码如下:

<script language=JavaScript> 
parent.location.reload(); 
</script> 

2.子窗口刷新父窗口

代码如下:

<script language=JavaScript> 
self.opener.location.reload(); 
</script> 

3.如何刷新另一个框架的页面用 (上面的实例以说明了)

代码如下:

语句1. window.parent.frames[1].location.reload(); 语句2. window.parent.frames.bottom.location.reload(); 语句3. window.parent.frames["bottom"].location.reload(); 语句4. window.parent.frames.item(1).location.reload(); 语句5. window.parent.frames.item('bottom').location.reload(); 语句6. window.parent.bottom.location.reload(); 语句7. window.parent['bottom'].location.reload();

4.如果想关闭窗口时刷新或者想开窗时刷新的话,在<body>中调用以下语句即可。 <body onload="opener.location.reload()"> 开窗时刷新 <body onUnload="opener.location.reload()"> 关闭时刷新 代码如下:

<script language="javascript"> 
window.opener.document.location.reload() 
</script> 

本文分享自微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer),作者:json

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-12-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • AngularJS 对SEO是硬伤

    在过去的2014年, 前端开发因为大量前端框架的出现开发模式有了巨大的改变,MVC这个web服务器端开发的模式,由于angularjs们的出现,变成了前端MVV...

    前朝楚水
  • 如何输出一份专业优秀的交互文档?

    在项目设计中,交互设计师与上游的产品经理,下游的视觉设计师,开发工程师和测试等岗位的工作密不可分。不论是承上启下的工作沟通, 还是方案评审的设计讲解,专业的交互...

    前朝楚水
  • 类目场馆建设设计方法-交互研究思路总结

    Part 1:全流程交互设计-馆区建设 在馆区建设与版本迭代中,交互在其中扮演着重要的角色;一个全流程的馆区交互设计应该综合考虑:运营策略分析、竞品分析、数据分...

    前朝楚水
  • 浅谈移动端页面无刷新跳转问题的解决方案

    王小婷
  • AngularJS应用页面切换优化方案

    葡萄城的一款尚在研发中的产品,对外名称暂定为X项目。其中使用了已经上市的Wijmo中SpreadJS产品,另外,在研发过程中整理了一些研发总结分享给大家。如本篇...

    葡萄城控件
  • 外链建设:认识PageRank

    谷歌核心是页面排名(PageRank),基于网站每个页面的分数,网站链接的流行度与指向页面链接的数量和质量有关,并被谷歌用作页面排名和搜索结果排名的标准之一。

    林雍岷
  • 移动端复杂运营页解决方案的探索和实践

    摘要 如何成为一名优秀的切图工程师?百度资深研发工程师潘征与大家分享自己的工作心得。 ? ROLE移动端酷炫运营页 2014年开始,我在我们部门负责移动端酷炫运...

    IT大咖说
  • 啥是佩奇排名算法

    佩奇排名是根据页面之间的链接结构计算页面的值的一种算法。下面我们通过动画来理解进行计算的具体流程。

    五分钟学算法
  • 你知道“啥是佩奇”,却不一定了解佩奇排名算法

    佩奇排名是根据页面之间的链接结构计算页面的值的一种算法。下面我们通过动画来理解进行计算的具体流程。

    AI科技大本营
  • 如何跳出小程序五级页面的限制

    前言:做小程序开发,就要在微信的规则内玩耍。最近做的小程序经常会有个报错:RangeError: Maximum call stack size exceede...

    连胜

扫码关注云+社区

领取腾讯云代金券