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。
IE下angularJS页面跳转的bug的更多相关文章
- AngularJs页面跳转
同一页面之间的跳转: $state.go('station.booking'); 打开新页面的跳转方式: var url = $state.href("knowledge.questiond ...
- php中的页面跳转和重定向
php中的页面跳转和重定向 ThinkPHP中跳转和重定向的区别 跳转: 浏览器认为: 当前URL请求成功, 重新请求新的URL. 浏览器会 记录当前的URL 和 新的URL 在请求历史记录中. 回退 ...
- AngularJS进阶(八)实现页面跳转并进行参数传递
angularjs实现页面跳转并进行参数传递 注:请点击此处进行充电! Angular页面传参有多种办法,我在此列举4种最常见的: 1. 基于ui-router的页面跳转传参 (1) 在Angular ...
- angularjs项目的页面跳转如何实现
链接:https://www.zhihu.com/question/33565135/answer/696515Angular页面传参有多种办法,根据不同用例,我举5种最常见的:PS: 在实际项目中, ...
- 关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转
还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p ...
- Windows Phone下页面跳转动画的实现
写在前面的一些废话: 前段时间一直忙于其他的事情,好长时间没有更新博客,很多东西虽然看过.学过,但是没有仔细去思考,去总结,长时间不用或者用的少难免会遗忘.最近由于家里以及感情方面的事,人也变得有点怨 ...
- 小程序页面跳转传参-this和that的区别-登录流程-下拉菜单-实现画布自适应各种手机尺寸
小程序页面跳转传参 根目录下的 app.json 文件 页面文件的路径.窗口表现.设置网络超时时间.设置多 tab { "pages": [ "pages/index/i ...
- JavaScript在IE6下超级链接window.location.href不跳转的bug 及 解决方案
今天遇到个很诡异的问题,就是<a href="javascript:void(0);" onclick="window.location.href=url" ...
- jQuery使用ajaxSubmit()提交表单(在不希望页面跳转的情况下)
原文:http://www.jb51.net/article/48728.htm ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先 ...
随机推荐
- Easyui-datagrid groupview分组后勾选问题
上面datagrid对应的代码如下: $('#tbCheckOut').datagrid({ title: '待分配库位', iconCls: 'icon-search', width: 1112, ...
- js系列(9)js的运用(一)
本节开始介绍javascript在html页面中的运用. (1)link样式表的动态绑定:(http://files.cnblogs.com/files/MenAngel/text04 ...
- 使用MFC提供的Http类下载和上传文件
1.下载文件 Download(const CString& strFileURLInServer, //待下载文件的URL const CString & strFileLocalF ...
- iOS5可能会删除本地文件储存 - Caches 也不安全
转自:http://blog.163.com/ray_jun/blog/static/1670536422011101225132544/ 出处:http://superman474.blog.163 ...
- BeginInvoke与EndInvoke方法解决多线程接收委托返回值问题
BeginInvoke与EndInvoke方法解决多线程接收委托返回值问题 原文:http://www.sufeinet.com/thread-3707-1-1.html 大家可以先看看我上 ...
- 騰訊RTX的API開發,給RTX開個天窗
好多人可能沒聽說RTX這個軟件,在此我簡單說明一下,這個軟件是騰訊為企業開發的一個內部聊天軟件,服務端不是在騰訊那邊,而是需要企業自己安裝到自己公司內部的服務器上,以供企業內部員工交流使用,功能和QQ ...
- SQL SERVER 2008中输入汉字乱码的问题
搭建服务器时,系统是英文版windows server 2008 ,安装的中文语言包.安装SqlServer2008 后,数据库中文显示乱码. baidu 后,说是 排序规则 的问题.修改为 Chin ...
- AD8275 Driver Amplifiers For Analog-To-Digital Converters
Driver Amplifiers For Analog-To-Digital Converters What amplifiers are used to drive analog-to-digit ...
- iOS:Tools:快速注释Doxygen
Xcode5有个新特性就是自己定义的函数也会被检测集成到代码提示里面,也就是在Quick Help有提示.如 /** * @brief 设置id * * @param id 要设置的id */ +(v ...
- 自己写的一个Yeoman的Generator-Require-Angularjs
Yeoman是一个常见的工作流,能够很方面的搭建属于自己的脚手架. 这段时间我用闲暇时间写了一个Generator来玩了一下,这个Generator的主要目的是快速建立一个RequireJS+Angu ...