用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的更多相关文章

  1. AngularJs页面跳转

    同一页面之间的跳转: $state.go('station.booking'); 打开新页面的跳转方式: var url = $state.href("knowledge.questiond ...

  2. php中的页面跳转和重定向

    php中的页面跳转和重定向 ThinkPHP中跳转和重定向的区别 跳转: 浏览器认为: 当前URL请求成功, 重新请求新的URL. 浏览器会 记录当前的URL 和 新的URL 在请求历史记录中. 回退 ...

  3. AngularJS进阶(八)实现页面跳转并进行参数传递

    angularjs实现页面跳转并进行参数传递 注:请点击此处进行充电! Angular页面传参有多种办法,我在此列举4种最常见的: 1. 基于ui-router的页面跳转传参 (1) 在Angular ...

  4. angularjs项目的页面跳转如何实现

    链接:https://www.zhihu.com/question/33565135/answer/696515Angular页面传参有多种办法,根据不同用例,我举5种最常见的:PS: 在实际项目中, ...

  5. 关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转

    还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p ...

  6. Windows Phone下页面跳转动画的实现

    写在前面的一些废话: 前段时间一直忙于其他的事情,好长时间没有更新博客,很多东西虽然看过.学过,但是没有仔细去思考,去总结,长时间不用或者用的少难免会遗忘.最近由于家里以及感情方面的事,人也变得有点怨 ...

  7. 小程序页面跳转传参-this和that的区别-登录流程-下拉菜单-实现画布自适应各种手机尺寸

    小程序页面跳转传参 根目录下的 app.json 文件 页面文件的路径.窗口表现.设置网络超时时间.设置多 tab { "pages": [ "pages/index/i ...

  8. JavaScript在IE6下超级链接window.location.href不跳转的bug 及 解决方案

    今天遇到个很诡异的问题,就是<a href="javascript:void(0);" onclick="window.location.href=url" ...

  9. jQuery使用ajaxSubmit()提交表单(在不希望页面跳转的情况下)

    原文:http://www.jb51.net/article/48728.htm ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先 ...

随机推荐

  1. python一个简单的登录

    文件目录下有两个文件 user_name.txt lock_file.txt 实际中可以读数据库里的信息 代码如下 #encoding = utf-8 import sys user_file = ' ...

  2. Category和Extension

    转: http://blog.csdn.net/leikezhu1981/article/details/19091049 一.概述 类别是一种为现有的类添加新方法的方式. 利用Objective-C ...

  3. js 排列 组合 的一个简单例子

    最近工作项目需要用到js排列组合,于是就写了一个简单的demo. 前几天在网上找到一个写全排列A(n,n)的code感觉还可以,于是贴出来了, 排列的实现方式: 全排列主要用到的是递归和数组的插入 比 ...

  4. HTML5手机APP开发入(3)

    HTML5手机APP开发入(3) 课程内容: 按照AngularJs MVC框架进行代码重构,新建一个DataService服务类使用SQLite插件实现储存对通讯录的本地存储. 涉及的知识点: An ...

  5. HBase + Kerberos 配置示例(二)

    接上篇<HBase + Kerberos配置示例(一)>,我们继续剩下的配置工作. 环境准备 Hadoop配置 Zookeeper配置 HBase配置 Java测试程序 环境准备 安装ha ...

  6. 转: sql server2008 字段类型详解

    bit 整型 bit数据类型是整型,其值只能是0.1或空值.这种数据类型用于存储只有两种可能值的数据,如Yes 或No.True 或False .On 或Off. 注意:很省空间的一种数据类型,如果能 ...

  7. fastreport totalpage 只有设置doublepassreport为true 才正确否则为0

    fastreport totalpage 只有设置doublepassreport为true 才正确否则为0

  8. PowerShell定时抓取屏幕图像

         昨天的博文写了定时记录操作系统行为,其实说白了就是抓取了击键的记录和对应窗口的标题栏,而很多应用程序标题栏又包含当时记录的文件路径和文件名,用这种方式可以大致记录操作了哪些程序,打开了哪些文 ...

  9. 关于android中线性布局的layout_gravity属性

    当 android:orientation="vertical"  时, 只有水平方向的设置才起作用,垂直方向的设置不起作用.即:left,right,center_horizon ...

  10. [原创]Android Studio的Instant Run(即时安装)原理分析和源码浅析

    Android Studio升级到2.0之后,新增了Instant Run功能,该功能可以热替换apk中的部分代码,大幅提高测试安装的效率. 但是,由于我的项目中自定义了一些ClassLoader,当 ...