angular中如何绑定iframe中src的方法
更新时间：2019年02月01日 09:47:21 作者：YellRes
这篇文章主要介绍了angular中如何绑定iframe中src的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
需求: 页面中有一个网页组件(由iframe编写)，此iframe显示在一个输入框中，当修改输入框中地址的时候，要求改变网页组件中的内容
网页组件中的代码(html的部分)
<iframe #Iframe [src]="testUrl" frameborder="0" width="100%" height="100%"> </iframe>
网页组件中的代码(ts的部分)
...省略
export class DesignWebInputComponent implements OnInit{
testUrl ;
}
此时问题出现了，页面无法显示内容
不要慌，有办法可以解决
constructor( private sanitizer:DomSanitizer) {}
导入DomSanitizer 这个类 并使用其中的bypassSecurityTrustResourceUrl() 转换url的格式 如下
trustUrl(url: string) {
if(url){
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
}
html中
<iframe #Iframe [src]="trustUrl(testUrl)" frameborder="0" width="100%" height="100%"> </iframe>
在这里写了个trustUrl()转换 testUrl 这样就可以显示了
总结: 使用 DomSanitizer 类中的 bypassSecurityTrustResourceUrl() 来转换url
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了angular-ui-sortable实现可拖拽排序列表，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
下面小编就为大家带来一篇关于angular js_$watch监控属性和对象详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
Angular.js组件之input mask对input输入进行格式化详解
这篇文章主要给大家介绍了关于Angular.js组件之input mask对input输入进行格式化的相关内容，文中通过示例代码详细介绍了将银行卡号和日期的方法，需要的朋友们可以参考借鉴，下面来一起看看吧。2017-07-07
这篇文章主要为大家详细介绍了angular2倒计时组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要给大家介绍了关于angular实现页面打印局部功能的思考与方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-04-04
我们知道在应用的页面或者组件需要加载数据时，浏览器和angular渲染页面都需要消耗一定的时间。这篇文章主要介绍了AngularJS 防止页面闪烁的方法,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了angular.bind使用心得，以及个人对于angular.bind的理解，这里分享给大家，希望大家能够喜欢。2015-10-10
本文主要介绍AngularJS 事件,这里整理了相关资料,比较详细的介绍了AngularJS的使用方法,有需要的小伙伴参考下2016-07-07
这篇文章主要介绍了Angular路由ui-router配置详解，非常不错，具有一定得参考借鉴价值，需要的朋友参考下吧2018-08-08
这篇文章主要介绍了Angular2 (RC4) 路由与导航的相关资料,需要的朋友可以参考下2016-09-09
最新评论