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 相关文章推荐
一个javascript参数的小问题
Mar 02 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
JS禁止查看网页源代码的实现方法
Oct 12 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
JavaScript学习笔记之惰性函数示例详解
Aug 27 Javascript
Vue实现active点击切换方法
Mar 16 Javascript
详解Element-UI中上传的文件前端处理
Aug 07 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 Javascript
js实现时分秒倒计时
Dec 03 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
php简单统计字符串单词数量的方法
2015/06/19 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
Zend Framework教程之前端控制器Zend_Controller_Front用法详解
2016/03/07 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
JavaScript多线程的实现方法
2007/05/08 Javascript
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
深入理解JavaScript定时机制
2010/10/29 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
2017/03/30 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
人工神经网络算法知识点总结
2019/06/11 Python
python实现字典嵌套列表取值
2019/12/16 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
JPA的优势都有哪些
2013/07/04 面试题
创业计划书模版
2014/02/05 职场文书
小学教师自我评价
2015/03/04 职场文书
反邪教观后感
2015/06/11 职场文书
Vue实现动态查询规则生成组件
2021/05/27 Vue.js