angular中如何绑定iframe中src的方法
2019-05-20 07:06
2711 查看
需求: 页面中有一个网页组件(由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/ionic中对img、iframe等的src进行动态绑定变量的问题解决
- iframe中的js如何调用父页面中模块化好的脚本中的方法?
- Jquery如何序列化form表单数据为JSON对象 C# ADO.NET中设置Like模糊查询的参数 从客户端出现小于等于公式符号引发检测到有潜在危险的Request.Form 值 jquery调用iframe里面的方法 Js根据Ip地址自动判断是哪个城市 【我们一起写框架】MVVM的WPF框架(三)—数据控件 设计模式之简单工厂模式(C#语言描述)
- 如何使用DataBinder.Eval()方法进行数据绑定
- jsp页面中某个src,如某个iframe的src,应该填写什么?可以是html、jsp、servlet、action吗?是如何加载的?
- 数据绑定技术—如何使用DataBinder.Eval()方法进行数据绑定
- angular aot编译报错 ERROR in ./src/main.ts 解决方法
- angular 指令中绑定父 scope 的方法
- 如何操作iframe父页面中的元素、方法、变量
- 详解angular如何调用HTML字符串的方法
- jquery得到iframe src属性值的方法
- 多种改变iframe的src地址方法
- 如何将自定义的方法应用到DataGrid的绑定列上
- 在c#中如何动态改变iframe的src值,动态指向一个网页
- 如何绑定本地IP方法
- 如何设置iframe的高度,src中的网页时动态生成的,大小不定
- angularJs select绑定的model取不到值的解决方法
- 如何解决FormView中实现DropDownList连动选择时出现 "Eval()、XPath() 和 Bind() 这类数据绑定方法只能在数据绑定控件的上下文中使用" 的错误
- 关于c#中双主键表数据如何绑定到DataTable的方法(针对于dataset.xsd的特殊情况)
- IIS如何绑定域名 (IIS绑定域名详细设置方法)