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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

AngularJS iframe跨域打开内容时报错误的解决办法

AngularJS中ng-options实现下拉列表的数据绑定方法
今天小编就为大家分享一篇AngularJS中ng-options实现下拉列表的数据绑定方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
angular6的响应式表单的实现
这篇文章主要介绍了angular6的响应式表单的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
AngularJs根据访问的页面动态加载Controller的解决方案
这篇文章主要介绍了AngularJs根据访问的页面动态加载Controller的解决方案,需要的朋友可以参考下
2015-02-02
Angular路由简单学习
这篇文章主要和大家一起学习Angular路由，介绍angular的$route的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
Angular项目里ngsw-config.json文件作用详解
这篇文章主要为大家介绍了Angular项目里ngsw-config.json文件作用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-11-11
AngularJS 所有版本下载地址
这篇文章主要介绍了 AngularJS 所有版本下载地址的相关资料,需要的朋友可以参考下
2016-09-09
angular + express 实现websocket通信
最近需要实现一个功能,后端通过TCP协议连接雷达硬件的控制器,前端通过websocket连接后端,当控制器触发消息的时候,把信息通知给所以前端,本文给的大家讲解angular + express 实现websocket通信的思路,感兴趣的朋友一起看看吧
2023-09-09
Angular利用trackBy提升性能的方法
这篇文章主要介绍了在Angular中利用trackBy来提升性能的实现方法,需要的朋友可以参考下
2018-01-01
Angular中$state.go页面跳转并传递参数的方法
这篇文章主要介绍了angular中$state.go页面跳转并传递参数的方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-05-05
Angular组件化管理实现方法分析
这篇文章主要介绍了Angular组件化管理实现方法,结合具体实例分析了Angular模块组件化管理以提高代码复用性的实现方法与相关操作技巧,需要的朋友可以参考下
2017-03-03

angular中如何绑定iframe中src的方法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具