angularjs 中的iframe ng-src取值失败的解决方法

本文介绍如何在Angular项目中利用$sce服务解决将外部URL加载到iframe时遇到的跨域问题。通过信任资源URL并使用过滤器简化操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题:项目中遇到需要将url的值赋到iframe的src属性上,一直报错

解决方法:

1、ng里面有个属性是专门用来解决跨域问题的 $sce。

  用法:
$scope.someUrl = $sce.trustAsResourceUrl('路径');

例:

将$sce引入控制器中


信任该URL:

vm.masUrl = $sce.trustAsResourceUrl(vm.masUrl);

iframe页面取值:

<span ng-if="item.videoid!=0">
              <iframe ng-src="{{picsDetail.masUrl}}" frameborder="0" width="800" height="550" scrolling="no" ></iframe>
</span>


2、可以利用上面的方法写一个过滤器

angular.module('filters-module', [])
.filter('trustAsResourceUrl', ['$sce', function($sce) {
    return function(val) {
        return $sce.trustAsResourceUrl(val);
    };
}])
例:
<ul class="nav nav-tabs" ng-repeat="item in [1,2,3,4]">  
  <iframe ng-src="{{someUrl |trustAsResourceUrl }}" height="100%" width="100%"></iframe>

</ul>




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值