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 相关文章推荐
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
JavaScript函数作用域链分析
Feb 13 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
js实现登录验证码
Dec 22 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
关于Vue实现组件信息的缓存问题
Aug 23 Javascript
React如何避免重渲染
Apr 10 Javascript
vue实现简单loading进度条
Jun 06 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 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
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
CSS+JS构建的图片查看器
2006/07/22 Javascript
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
为jQuery增加join方法的实现代码
2010/11/28 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
javascript返回顶部的按钮实现方法
2016/01/09 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
vue数据双向绑定原理解析(get &amp; set)
2017/03/08 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
ES6如何用一句代码实现函数的柯里化
2020/01/18 Javascript
Python中if __name__ == &quot;__main__&quot;详细解释
2014/10/21 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
浅谈django的render函数的参数问题
2018/10/16 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
奠基仪式策划方案
2014/05/15 职场文书
警察先进个人事迹材料
2014/05/16 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
护士辞职信怎么写
2015/02/27 职场文书
2015年商场工作总结
2015/04/27 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技