angular中如何绑定iframe中src的方法
需求: 页面中有一个网页组件(由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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍js改变Iframe中Src的方法，包括了js改变Iframe中Src的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js改变Iframe中Src的方法。分享给大家供大家参考。具体实现方法如下： 希望本文所述对大家的javascript程序设计有所帮助。
-
问题内容： 我正在尝试从变量设置iframe 的属性，但无法正常使用… 标记： 控制器/ app.js： 使用此代码，不会将任何内容插入iframe的属性。它只是空白。 更新1： 我将依赖项注入到AppCtrl中，并且$ sce.trustUrl（）现在可以正常运行而不会引发错误。但是，它返回的是我不确定如何用于插入实际URL的返回值。无论是在属性的插值括号内使用$ sce.trustUrl（）还
-
我在一个Vue项目上工作，实际上我试图将img src属性绑定到数据值，然后我使用setInterval函数动态更改url每次调用函数，但当我运行页面时，我得到一个错误就像 属性或方法“源”不是在实例上定义的，而是在呈现过程中引用的。通过初始化属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。见：https://vuejs.org/v2/guide/reactivity.htm
-
问题内容： 我试图将诺言与观点捆绑在一起。我不知道您是否可以直接执行此操作，但这就是我要尝试执行的操作。有什么想法我做错了吗？ 注意：源代码有点超时，并使用静态数据，但这使代码更易于诊断。 编辑： JSFiddle页面：http : //jsfiddle.net/YQwaf/27/ 编辑：解决方案： 事实证明您 可以 直接绑定诺言。我的原始代码有两个问题： 使用setTimeout（）而不是ang
-
本文向大家介绍详解Angular Forms中自定义ngModel绑定值的方式，包括了详解Angular Forms中自定义ngModel绑定值的方式的使用技巧和注意事项，需要的朋友参考一下 在 Angular 应用中，我们有两种方式来实现表单绑定——“模板驱动表单”与“响应式表单”。这两种方式通常能够很好的处理大部分的情况，但是对于一些特殊的表单控件，例如 input[type=datetime
-
我最近在读Java中的思维（第四版）时，遇到了一个关于Java中方法绑定的问题。首先让我们看看书中的两个定义： 将方法调用连接到方法体称为绑定。 Java中的所有方法绑定都使用后期绑定，除非方法是静态的或最终的。 您可以在多态性章节的方法调用绑定一节中找到这些定义。（第281-282页） null