IE下angularJS页面跳转的bug

时间：2021-05-05 20:47:08

用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。

相关文章