JavaScript多种页面刷新方法小结


Posted in Javascript onApril 04, 2019

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多种页面刷新方法小结,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript一点特殊用法
May 28 Javascript
javascript 年月日联动实现核心代码
Dec 21 Javascript
Jquery 实现grid绑定模板
Jan 28 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
canvas绘制爱心的几种方法总结(推荐)
Oct 31 Javascript
面包屑导航详解
Dec 07 Javascript
vue-cli安装使用流程步骤详解
Nov 08 Javascript
javascript实现遮罩层动态效果实例
May 14 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
详解easyui 切换主题皮肤
Apr 04 #Javascript
jQuery分组选择器简单用法示例
Apr 04 #jQuery
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 #Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 #jQuery
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
Apr 04 #Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 #Javascript
Vue传参一箩筐(页面、组件)
Apr 04 #Javascript
You might like
PHP SplObjectStorage使用实例
2015/05/12 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
js获取键盘按键响应事件(兼容各浏览器)
2013/05/16 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
22点关于jquery性能优化的建议
2014/05/28 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
Layui数据表格 前后端json数据接收的方法
2019/09/19 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
python实现简单购物商城
2016/05/21 Python
python实现从pdf文件中提取文本,并自动翻译的方法
2018/11/28 Python
Python简单基础小程序的实例代码
2019/04/28 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
自动化系在校本科生求职信
2013/10/23 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
业务内勤岗位职责
2014/04/30 职场文书
大学新闻系求职信
2014/06/03 职场文书
2014年学前班工作总结
2014/12/08 职场文书
教师党员自我评价范文
2015/03/04 职场文书