JavaScript多种页面刷新方法小结

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刷新页面的几种方法：

history.go(0)
location.reload()
location=location
location.assign(location)
document.execCommand('Refresh')
window.navigate(location)
location.replace(location)
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.baidu.com"> （其中20指隔20秒后跳转到http://www.baidu.comt页面）

3，页面自动刷新js版

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

4，JS刷新框架的脚本语句

//刷新包含该框架的页面用
<script type="text/javascript">
 parent.location.reload();
</script>
//子窗口刷新父窗口
<script type="text/javascript">
 self.opener.location.reload();
</script>
(　或　<a href="javascript:opener.location.reload()" rel="external nofollow" >刷新</a> )
//刷新另一个框架的页面用
<script type="text/javascript">
 parent.另一FrameID.location.reload();
</script>

如果想关闭窗口时刷新或想开窗时刷新，在<body>中调用以下语句即可。

<body onload="opener.location.reload()"> 开窗时刷新
<body onUnload="opener.location.reload()"> 关闭时刷新
<script>
 window.opener.document.location.reload()
</script>

总结

以上所述是小编给大家介绍的JavaScript多种页面刷新方法小结，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • Javascript刷新页面的实例

    Javascript刷新页面的实例 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.U

  • vue.js实现刷新当前页面的方法教程

    vue.js实现刷新当前页面的方法教程

    前言 Vue.js(是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,是一种数据驱动的前端框架 我们在开发vue的页面的时候,有时候会遇到需要刷新当前页面功能,但是vue框架自带的router是不支持刷新当前页面功能的,它只支持在路由路径变化时刷新页面.基于这个原理,为了实现刷新页面,可以先跳转到一个空页面,然后马上跳回来,从而实现这个功能. 开发工具环境 vue.js webstorm 方法如下 一.原理 如上图所示,我

  • javascript监听页面刷新和页面关闭事件方法详解

    javascript监听页面刷新和页面关闭事件方法详解

    在我们的日常生活中,时常遇到这么一种情况,当我们在点击一个链接.关闭页面.表单提交时等情况,会提示我们是否确认该操作等信息. 这里就给大家讲讲javascript的onbeforeunload()和onunload()两个事件. 相同点: 两者都是在对页面的关闭或刷新事件作个操作. 不同点: unbeforeunload()事件执行的顺序在onunload()事件之前发生.(因为,unbeforeunload()是在页面刷新之前触发的事件,而onubload()是在页面关闭之后才会触发的). u

  • AngularJS实现页面定时刷新

    有时我们在前端可能会有这样的需求: 1.每隔一段时间刷新一下页面中的数据 2.根据需要可以暂停和启用刷新 接下来我们就来看下AngularJS的实现方法: 首先我们了解到AngularJS中$interval可以用来处理间歇性处理一些事情,那么我们的间歇性刷新就使用interval来实现. $interval使用方法: 1.启动一个定时任务 $interval(function(){},n1,n2); 第一个参数function是指我们的定时任务要触发的事件, 第二个参数n1是指每隔多少毫秒触发

  • JS中利用localStorage防止页面动态添加数据刷新后数据丢失

    非常不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,use

  • JS关于刷新页面的相关总结

    很多程序员无论是新手还是老的程序员都避免不了关于JS刷新页面的相关内容,在本文中我们整理了我们总结的关于JS页面刷新的相关重要知识点文章,一起来跟着学习下. JS刷新当前页面的几种方法总结 reload 方法,该方法强迫浏览器刷新当前页面 replace 方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过"前进"和"后退"来访问已经被替换的URL 返回并刷新页面 自动刷新页面的方法 js刷新页面方法大全 页面

  • jsp实现局部刷新页面、异步加载页面的方法

    局部刷新页面.异步加载页面方案: 1.在jsp页面需要刷新的地方增加一个控件 <div id=courseList></div> 2.新建一个jsp页面:aaa.jsp(用来放置需要刷新的内容) 3.将id为courseList的dom标签重新赋值为需要的页面,就能达到局部刷新的目的 $('#courseList').html(msg); 例如: $.ajax({ dataType:"text", url:basePath+'/courseList', data

  • Javascript实现倒计时（防页面刷新）实例

    话不多说,请看实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q

  • js+html5实现页面可刷新的倒计时效果

    写了一个5分钟倒计时的代码,有的时候代码需要刷新,然后倒计时又从4:59开始了,我想到的一个解决办法,就是使用缓存,将开始倒计时的时间加上要倒计时的5分钟设为缓存,然后直接用这个缓存时间减去当前时间,就可以一直倒计时了,不管你在倒计时过程中操作了什么,时间总在变吧,哈哈,原理就是这样嘀. <!doctype html> <html> <head> <meta charset="utf-8"> <title>简单易用的倒计时js

  • JavaScript多种页面刷新方法小结

    1,reload 方法 该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页.true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5("刷新") 2,replace 方法 方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过"前进"和"后退"来访问已

  • javascript实现页面刷新时自动清空表单并选中的方法

    本文实例讲述了javascript实现页面刷新时自动清空表单并选中的方法.分享给大家供大家参考.具体实现方法如下: <script language="javascript"> window.onload=function() { document.forms[0].reset(); placeFocus(); } function placeFocus() { document.forms[0].elements[0].focus(); // assuming the f

  • Nginx实现404页面的方法小结

    第一种:Nginx自己的错误页面 Nginx访问一个静态的html 页面,当这个页面没有的时候,Nginx抛出404,那么如何返回给客户端404呢? 看下面的配置,这种情况下不需要修改任何参数,就能实现这个功能. server { listen 80; server_name www.test.com; root /var/www/test; index index.html index.htm; location / { } # 定义错误页面码,如果出现相应的错误页面码,转发到那里. erro

  • Vue3中10多种组件通讯方法小结

    Vue3中10多种组件通讯方法小结

    目录 Props emits expose / ref Non-Props 单个根元素的情况 多个元素的情况 v-model 单值的情况 多个 v-model 绑定 v-model 修饰符 插槽 slot 默认插槽 具名插槽 作用域插槽 provide / inject 总线 bus getCurrentInstance Vuex State Getter Mutation Action Module Pinia 安装 注册 mitt.js 安装 使用 本文讲解 Vue 3.2 组件多种通讯方式

  • javascript web页面刷新的方法收集

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

  • JavaScript操纵窗口的方法小结

    在前面的介绍中,我们讨论过close()方法: 复制代码 代码如下: win = window.open("http://www.jb51.net/", "js"): win.close(): JavaScript提供了许多方法与属性,我们可以使用它们来控制窗口. 移动.滚动.改变大小 下面的方法(N4+,IE4+)负责个定窗口的移动.滚动以及大小改变操作: 复制代码 代码如下: // 移动窗口的屏幕位置到指定的偏移x .y(绝对移动) window.moveTo(

  • 让浏览器非阻塞加载javascript的几种方法小结

    浏览器为了确保正确执行脚本和呈现布局在浏览器加载和执行完成它之前会完全阻塞页面后续内容的呈现和其他资源的加载. 在页面的加载过程中如果可以做到内容的逐步呈现,对于良好的用户体验来说是非常重要的.通常我们也会在wondow对象的onload事件处理函数中做一些事情,但由于脚本阻塞加载和呈现的特性这一方面增加了页面载入时间推迟了onload事件的触发,另一方面也延迟了用户所期待的反馈.这就需要我们使用一些方法来让浏览器以非阻塞的方式加载外部脚本. 一  使用XMLHttpRequest对象异步方式

  • Javascript 两种刷新方法以及区别和适用范围

    JS 两种刷新方法 在项目中有一个人信息修改的页面,但是修改后显示的却是修改之前的内容,分析问题后发现查询语句写在了修改语句之前,有些某些需要又必须这么写,但是修改信息后先却显示之前的信息也太不科学了. 所以我就想用js刷新一下页面,于是在更新后输出了<script>window.location.reload()</script>; 可问题又来了,每次跟新后浏览器就会提示是否再次提交数据.如果点击是就会重新修改一遍,于是提示又来一遍,我靠,这是死循环啊.但是如果点击否则页面提示过

  • ASP.NET调用javascript脚本的常见方法小结

    1.直接在前台调用 javascript 函数 很简单,在 head 元素之间加入 script 元素,将 type 元素设置为 " text/javascript " 如: 复制代码 代码如下: <head runat="server"> <script type="text/javascript" > function ShowName(str) { alert("您的名字为:("+str+&quo

  • C#后台调用前台javascript的五种方法小结

    在网上找了找,发现有三种方法可以访问到前台代码: 第一种,OnClientClick (vs2003不支持这个方法) <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="client_click()" OnClick="Button1_Click" /> client_click() 就是javascript的

随机推荐