在Safari浏览器中不兼容,报错

   项目用的js框架是angularJS,遇到一个和浏览器兼容相关的bug,功能是按钮点击出现一个popupWindow,再点击popupWindow右上角的关闭按钮时,在Safari浏览器中会崩溃而Chrome以及Firefox浏览器中均能正常显示。

   报错内容如下:

Safari can’t open “unsafe:javascript:void(0);” because macOS doesn’t recognize Internet addresses starting with “unsafe”

   如下图所示:
Safari Browser 报错信息

   根据其错误信息可以大体推测出和javascript:void(0)以及macOS不能识别有关,全局搜索javascript:void(0)在项目中找到这样写的代码,调试着修改。我的问题代码是在这里:

<a href="javascript:void(0)" data-ng-click="showPopup()" class="close-link"><img alt="close"></a>

   展开popup后点击关闭时,通过href标签指向本页就实现了关闭的功能了,但是macOS不能识别,原因是angular对href有安全检查,只能生成它认为安全的链接,javascript不在angularJS的白名单中,将href="javascript:void(0)"修改为href="#"即可,代码如下:

<a href="#" data-ng-click="showPopup()" class="close-link"><img alt="close"></a>

   还有一种修改方式是配置编译:

angular.module('app').config( [
    '$compileProvider',
    function( $compileProvider )
    {   
        $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|file|sms):/);
        // Angular v1.2 之前使用 $compileProvider.urlSanitizationWhitelist(...)
    }
]);

以上即为解决方式,如有疑问请及时指出,其中参考链接如下及大致概要如下;
1.https://gitter.im/720kb/angular-datepicker?at=5afe7357b84be71db9178260

   Since javascript is not in the sanitization whitelist by default in angularjs, it will be replaced with href=”unsafe:javascript:void(0)”. If you click on a link like this, Safari will try to open a page and just shows an error called Safari can’t open “unsafe:javascript:void(0)” because macOS doesn’t recognize Internet addresses starting with “unsafe:”.
   The javascript protocoll can be added to the whitelist to fix this:
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|s?ftp|mailto|tel|file|javascript):/);
   However, i don’t think thats recommended. It would be better just to change the href to # or just simply remove it.

2.http://eyehere.net/2015/angularjs-unsafe/ 标题:“关于angularJs中的unsafe”

angular.module('app').config( [
    '$compileProvider',
    function( $compileProvider )
    {   
        $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|file|sms):/);
        // Angular v1.2 之前使用 $compileProvider.urlSanitizationWhitelist(...)
    }
]);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值