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 相关文章推荐
HTML中不支持静态Expando的元素的问题
Mar 08 Javascript
jquery实现图片裁剪思路及实现
Aug 16 Javascript
javascript面向对象程序设计(一)
Jan 29 Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
JavaScript 栈的详解及实例代码
Jan 22 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
webpack将js打包后的map文件详解
Feb 22 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
Feb 27 Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
Vue和React组件之间的传值方式详解
Jan 31 Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 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与javascript的两种交互方式
2006/10/09 PHP
php获取数组长度的方法(有实例)
2013/10/27 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
Python pandas常用函数详解
2018/02/07 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
python统计文章中单词出现次数实例
2020/02/27 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
最经典的大学生职业生涯规划范文
2014/03/05 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
员工2014年度工作总结
2014/12/09 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书
PyTorch中的torch.cat简单介绍
2022/03/17 Python