AngularJs返回前一页面时刷新一次前面页面的方法


Posted in Javascript onOctober 09, 2018

要求:

页面A进入到页面B,在页面B处理完后返回页面A,页面A里的数据应该动态的减去一条,但由于一般情况下页面是缓存起来的,返回A后读取的是缓存静态页面,里面显示的数据不会减少。应客户要求,需要重新加载一次数据,达到页面A可以刷新数据目的。

研究过程:

从网上寻找发现,有一个方法可以获取到当前页面的URL:$location

以 ‘http://localhost/$location/21.1%20$location.html#/foo?name=bunny#myhash' 这个路径为例:

1. 获取当前完整的url路径:

$location.absUrl():
// http://localhost/$location/21.1%20$location.html#/foo?name=bunny#myhash

2. 获取当前url路径(当前url#后面的内容,包括参数和哈希值):

$location.url();
// /foo?name=bunny#myhash

3. 获取当前url的子路径(也就是当前url#后面的内容,不包括参数):

$location.path()
// /foo

4. 获取当前url的协议(比如http,https)$location.protocol()

$location.protocol()
// http

5. 获取当前url的主机名

$location.host()
// localhost

6. 获取当前url的端口

$location.port()
// 80 (这里就是wamp的默认端口号)

获取到当前页的URL后,把它赋给全局变量,当URL变化时,刷新前一页面即可

parent.location.reload(); //该方法可用于刷新前面所以页面

之后继续在网上找有没有更好的办法,发现了一个可以直接使用的方法:

这两个事件分别发生在当url开始发生改变,以及url改变完成.他们都被绑定在$rootScope里面:

$rootScope.$on('$locationChangeStart',function(){
  console.log('开始改变$location')
});
$rootScope.$on('$locationChangeSuccess',function(){
  console.log('结束改变$location')
});

之后写进代码里做了验证,验证结果可用。写法为:

$rootScope.$on('$locationChangeSuccess',function(){//返回前页时,刷新前页
 parent.location.reload(); 
});

以上这篇AngularJs返回前一页面时刷新一次前面页面的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
js form 验证函数 当前比较流行的错误提示
Jun 23 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 Javascript
Knockout自定义绑定创建方法
Dec 26 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
VUE中v-model和v-for指令详解
Jun 23 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
JS中Promise函数then的奥秘探究
Jul 30 Javascript
使用gulp构建前端自动化的方法示例
Dec 25 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
Apr 21 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 #Javascript
angular4强制刷新视图的方法
Oct 09 #Javascript
Angular4.x Event (DOM事件和自定义事件详解)
Oct 09 #Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 #Javascript
vue router 源码概览案例分析
Oct 09 #Javascript
Angular4 Select选择改变事件的方法
Oct 09 #Javascript
对angular 监控数据模型变化的事件方法$watch详解
Oct 09 #Javascript
You might like
WINDOWS 2000下使用ISAPI方式安装PHP
2006/09/05 PHP
JAVA/JSP学习系列之六
2006/10/09 PHP
php实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
php打印输出棋盘的实现方法
2014/12/23 PHP
基于PHP生成简单的验证码
2016/06/01 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
php实现文章评论系统
2019/02/18 PHP
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
javascript淡入淡出效果的实现思路
2012/03/31 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
EasyUi datagrid 实现表格分页
2015/02/10 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
重命名批处理python脚本
2013/04/05 Python
Django如何实现网站注册用户邮箱验证功能
2019/08/14 Python
Python实现直播推流效果
2019/11/26 Python
tensorflow 自定义损失函数示例代码
2020/02/05 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
机电一体化职业规划书
2014/01/07 职场文书
《海伦?凯勒》教学反思
2014/04/17 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
安全生产月宣传标语
2014/10/06 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
民事起诉书范本
2015/05/19 职场文书
python 实现定时任务的四种方式
2021/04/01 Python
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis