zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Java性能小技巧
    使用Gitolite搭建Gitserver
    refresh的停车场(栈和队列的STL)
    BZOJ 2005 NOI2010 能量採集 数论+容斥原理
    PHP第四课 了解经常使用的函数
    JavaScript实现对象数组按不同字段排序
    android之Context对各种服务的管理
    程序员应该阅读的非编程类书籍有哪些?
    是男人就下100层【第五层】——换肤版2048游戏
    是男人就下100层【第四层】——Crazy贪吃蛇(3)
  • 原文地址:https://www.cnblogs.com/laogai/p/4720532.html
Copyright © 2011-2022 走看看