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

时间: 2024-10-23 13:31:01

IE下angularJS页面跳转的bug的相关文章

以过滤器(filter)为例,实现不同登录情况下的页面跳转

以过滤器(filter)为例,实现不同登录情况下的页面跳转 登录登录账户正确,进入主页. 登录账户错误,跳转到错误页面. 用户注销之后,用登录成功的网址再次登录,提示没有登录权限. 用户登录之后向Session中放入用户的数据 进入主页的时候要判断用户是否已经登陆:要求:在过滤器中实现 补充:还用到了一个提出常量的方法. 原文地址:https://www.cnblogs.com/WZ-BeiHang/p/12616949.html

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

angularjs实现页面跳转并进行参数传递 注:请点击此处进行充电! Angular页面传参有多种办法,我在此列举4种最常见的: 1. 基于ui-router的页面跳转传参 (1) 在AngularJS的app.js中用ui-router定义路由,比如现在有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的producer页,同时将producerId这个参数传过去. .state('producers', { url: '/pr

iOS故事板下使用代码跳转页面

如今iOS8下,使用Storyboards开发十分方便,搭配上Size Class后,并且适配更加便捷. 但是突然由代码写界面或者xib转向故事板,难免有一些疑惑. 由于故事板下,基本使用连续来跳转页面,但有些情况下总会用到代码控制页面跳转,这个时候传统的初始化ViewController后push过去会出现一个黑色屏幕,什么内容都没用. 解决方案: UIStoryboard *story = [UIStoryboard storyboardWithName:@"填写故事板名称" bu

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

还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p> .... <p id="#target">我是目标位置</p> ... 在js中实现跳转也是利用了这一点,下面直接在代码中解释吧: 1 <body> 2 <ul> 3 <li><a href="#/mus

搜索栏的使用(UISearchBar)(跳转到下一个页面,搜索栏消失)

导航栏上 添加按钮和触发事件(一句代码添加导航栏的按钮和方法) self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc]initWithTitle:@"删除" style:UIBarButtonItemStylePlain target:self action:@selector(selectRightAction:)]; 1.初始化搜索栏 UISearchBar *searchBar = [[UISearchB

jsp下页面跳转的几种方法小结

1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servlet或者是JSP到另外的一个Servlet.JSP 或普通HTML文件,也即你的form提交至a.jsp,在a.jsp用到了forward()重定向至b.jsp,此时form提交的所有信息在 b.jsp都可以获得,参数自动传递. 但forward()无法重定向至有frame的jsp文件,可以重定向至有frame的html文件,同

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

今天遇到个很诡异的问题,就是<a href="javascript:void(0);" onclick="window.location.href=url"></a>在IE6下面没反应,不跳转到onclik事件中的“window.location.href”. 当时我们在网上找了篇文章很快就解决了,但是文章中没有说明具体原因在哪里,只是说在“window.location.href”后面加一个"return false",

ngRoute+ngAnimate与JQM中的页面跳转的区别

1.ngRoute+ngAnimate与jQM中的页面跳转有何异同? 相同点: (1)完整的HTML只需要一个 (2)使用异步AJAX请求获取下一个页面 (3)可以实现转场动画 不同点: (1)ngRoute需要配置路由字典:jQM没有,更加灵活 (2)ngRoute访问路由地址的格式——特殊格式的hash http://xxx/index.html#/main jQM访问页面地址——普通的URL http://xxx/tpl/main.html (3)ngRoute访问的路由页面可以使用F5刷

Android Jetpack - 使用 Navigation 管理页面跳转

在今年的 IO 大会上,发布了一套叫 Android Jetpack 的程序库.Android Jetpack 里的组件大部分我们都接触过了,其中也有一些全新的组件,其中一个就是 Navigation. 简介 Navigation 是用来管理 APP 里页面跳转的.起初,我以为它是用来代替 startActivity 的,但其实并不是,大家往下看就知道它的作用了. 另外,iOS 的同学可能会有似曾相识的感觉,Navigation 应该是有借鉴 Storyboard 的. 使用 我们先来看看 Na