内容简介:需求: 页面中有一个网页组件(由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
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- Golang Echo数据绑定中time.Time类型绑定失败
- 如何在Symfony的表单中添加一个未绑定字段,否则绑定到一个实体?
- js双向绑定
- 延迟静态绑定——static
- 绑定自定义事件
- angular组件双向绑定
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
移动应用的设计与开发
[美] 弗林 (Brian Fling) / 马晶慧 / 电子工业出版社 / 2010-5 / 59.80元
本书全面介绍了如何在移动设备上设计和开发应用程序。书中从介绍移动产业的生态环境和移动媒体开始,阐述产品策划的方法、产品架构、视觉设计和产品类型的选择,并详细描述了产品实现过程中所用到的一些技术、工具和概念,最后还简单介绍了如何获得利润和降低成本,肯定了iPhone在移动设备发展史上起到的巨大推动作用。本书不仅能让读者了解到移动设计和开发的知识,更重要的是,它揭示了移动开发的代价高昂、标准混乱的根本......一起来看看 《移动应用的设计与开发》 这本书的介绍吧!