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


Posted in Javascript onFebruary 01, 2019

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript的函数
Jan 31 Javascript
在IE模态窗口中自由查看HTML源码的方法
Mar 08 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
Feb 04 Javascript
使用Grunt.js管理你项目的应用说明
Apr 24 Javascript
JavaScript匿名函数用法分析
Feb 13 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 Javascript
js中常用的Math方法总结
Jan 12 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 Javascript
Vue实现根据hash高亮选项卡
May 27 Javascript
浅探express路由和中间件的实现
Sep 30 Javascript
Websocket 向指定用户发消息的方法
Jan 09 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 #Javascript
JS集合set类的实现与使用方法示例
Feb 01 #Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 #jQuery
详解Vue中watch对象内属性的方法
Feb 01 #Javascript
JS字典Dictionary类定义与用法示例
Feb 01 #Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 #Javascript
微信小程序实现的动态设置导航栏标题功能示例
Jan 31 #Javascript
You might like
检测png图片是否完整的php代码
2010/09/06 PHP
使用dump函数,给php加断点测试
2013/06/25 PHP
解析php扩展php_curl.dll不加载的解决方法
2013/06/26 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
javascript fullscreen全屏实现代码
2009/04/09 Javascript
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
js实现多张图片延迟加载效果
2017/07/17 Javascript
angular4实现tab栏切换的方法示例
2017/10/21 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
Django框架模板的使用方法示例
2019/05/25 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
python烟花效果的代码实例
2020/02/25 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
美国休闲服装品牌:Express
2016/09/24 全球购物
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
土木工程专业个人求职信
2013/12/05 职场文书
社团活动策划书范文
2014/01/09 职场文书
外贸业务员求职信
2014/06/16 职场文书
安全保证书
2015/01/16 职场文书
法定代表人身份证明书
2015/06/18 职场文书
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis