angular中绑定如如何iframe中src

栏目: Html · 发布时间: 4年前

内容简介:需求: 页面中有一个网页组件(由iframe编写),此iframe显示在一个输入框中,当修改输入框中地址的时候,要求改变网页组件中的内容此时问题出现了,页面无法显示内容不要慌,有办法可以解决

需求: 页面中有一个网页组件(由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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

移动应用的设计与开发

移动应用的设计与开发

[美] 弗林 (Brian Fling) / 马晶慧 / 电子工业出版社 / 2010-5 / 59.80元

本书全面介绍了如何在移动设备上设计和开发应用程序。书中从介绍移动产业的生态环境和移动媒体开始,阐述产品策划的方法、产品架构、视觉设计和产品类型的选择,并详细描述了产品实现过程中所用到的一些技术、工具和概念,最后还简单介绍了如何获得利润和降低成本,肯定了iPhone在移动设备发展史上起到的巨大推动作用。本书不仅能让读者了解到移动设计和开发的知识,更重要的是,它揭示了移动开发的代价高昂、标准混乱的根本......一起来看看 《移动应用的设计与开发》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

SHA 加密
SHA 加密

SHA 加密工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具