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 指导方针
Apr 05 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
Sep 15 Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 Javascript
angular实现form验证实例代码
Jan 17 Javascript
canvas绘制的直线动画
Jan 23 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
Aug 14 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
May 14 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
Dec 02 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 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微信开发之查询城市天气
2016/06/23 PHP
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
js中的cookie的读写操作示例详解
2014/04/17 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
jQuery控制div实现随滚动条滚动效果
2016/06/07 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
利用jquery实现实时更新歌词的方法
2017/01/06 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
Python实现求两个csv文件交集的方法
2017/09/06 Python
对python判断是否回文数的实例详解
2019/02/08 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
python处理excel绘制雷达图
2019/10/18 Python
python 实现二维列表转置
2019/12/02 Python
python小程序基于Jupyter实现天气查询的方法
2020/03/27 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
Sony C++笔试题
2013/03/10 面试题
大学生入党思想汇报
2014/01/01 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
作风转变心得体会
2014/09/02 职场文书
后备干部推荐材料
2014/12/24 职场文书
雾霾停课通知
2015/04/24 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
英语读书笔记
2015/07/02 职场文书