IE下angularJS页面跳转的bug
用Angularjs做项目的过程中遇到一种情况:就是在IE浏览器下,当访问网站页面后,点击浏览器中的向左和向右(返回和前进)按钮时,需要点击两次才能正确跳转,但是在chrome及其他浏览器下该bug没有复现,后来找到原因就是angularjs中页面跳转的代码用的不恰当:在$watch,$on等中使用页面跳转最好配合$location使用。
$scope.$watchCollection('parentObj.selection', function () {
$scope.$broadcast('appIdChanged');
}, true);
$scope.$on('appIdChanged', function () {
_showMask();
var currentUrl=$location.absUrl();
var currentNewUrl=changeURLArg(currentUrl,'appId',$scope.parentObj.selection);
console.log(currentUrl+"---"+currentNewUrl);
$window.location.href=currentNewUrl; });
之前代码里的页面跳转运用的是:
$window.location.href=currentNewUrl;
后来改为:
$location=currentNewUrl;
在浏览器中测试没有出现点击两次才会页面跳转了。
下面看了一下资料,总结下 $location与$window.location.href的区别:
$location:
- 暴露当前地址栏的URL,这样你就能
- 获取并监听URL。
- 改变URL。
- 当出现以下情况时同步URL
- 改变地址栏
- 点击了后退按钮(或者点击了历史链接)(解决了在IE下点击两次才能返回上一页的bug)
- 点击了一个链接
- 一系列方法来获取URL对象的具体内容用(protocol, host, port, path, search, hash).formatDate
1. 比较$location和window.location
1) 目的:window.location和$location服务,都允许对当前浏览器的location进行读写访问。
2) API:window.location暴露一个未经加工的对象,附带一些可以直接修改的属性;而$location服务则是暴露一些jQuery风格的getter/setter方法。
3) 与angular应用声明周期的整合:$location知道关于所有内部声明周期的阶段,与$watch等整合;而window.location则不行。
4) 与HTML5 API无缝结合:是(with a fallback for legacy browsers,对于低版本的浏览器有兼容手段?);而window.location则没有。
5) 知道应用加载的文档根目录(docroot)或者上下文(context):window.location不行,wnidow.location.path会返回”/docroot/子路径”;而$location.path()返回真实的docroot。
什么时候该用$location
在应用中,任何需要对当前URL的改变作出响应,或者想去改变当前浏览器的URL的时候
它不能用来干什么
使用$location可以使URL改变,但不会刷新整个页面,要刷新页面的话,用低级的API,$window.location.href
。
最新文章
- effective OC2.0 52阅读笔记(三 接口与API设计)
- 【前台页面 BUG】回车按钮后,页面自动跳转
- Linux(Debian)+Apache+Django 配置
- 【uTenux实验】写在开始实验之前
- 配置SharePoint 2013 Search 拓扑结构
- mmo设计
- JVM内存区域划分
- node http.request请求
- Regularized Linear Regression with scikit-learn
- 【SVN Working copy is too old (format 10, created by Subversion 1.6)】解决方式
- 【Egret】Wing3发布移动APP功能,打包APK流程以及会遇到的问题
- NancyFx 2.0的开源框架的使用-Authentication
- Android初级教程之内容提供者获取联系人信息
- POJ1038 Bugs Integrated, Inc 状压DP+优化
- Javascript高级编程学习笔记(1)—— JS简介
- Requset模块
- K2路由器刷机教程
- zabbix 邮件报警 监控mysql主从
- LeetCode 169. Majority Element解题方法
- [国际A类会议] 2018最最最顶级的人工智能国际峰会汇总!CCF推荐!
热门文章
- iframe 使用
- Linux Buffers和Cached的区别(转)
- android: 创建自己的内容提供器
- 关于启明星系统移除apppath配置,让系统自动获取路径来设置cookie的解决方法
- Swift - UIView的无损截图
- iOS javascript js 交互
- Chrome谷歌浏览器首页被改为Hao123导航怎么办|附各类解决方法【转】
- Linux Red hat修改主机名
- Scala 深入浅出实战经典 第68讲:Scala并发编程原生线程Actor、Cass Class下的消息传递和偏函数实战解析
- Infer初体验 for Android