Question

我尝试使用角度2动态更改iframe的src我尝试过

HTML

<iframe class="controls" width="580" height="780" src="{{controllerSrc}}" frameborder="0" allowfullscreen></iframe>

COMPONENT.TS

import { Component, OnInit } from '@angular/core';

declare var jQuery: any;
const $ = jQuery;

export class VideoplayerComponent implements OnInit {
    controllerSrc: string;


ngOnit(){

    $('.button1').click(function(){
        this.controllerSrc = 'https://www.videoindexer.ai/embed/insights/0c7357bd5c/?widgets=people';
});
}

}

但我收到的错误是

ERROR Error: unsafe value used in a resource URL context (see http://g.co/ng/security#xss)

不确定我能做到这一点，任何帮助都会受到赞赏，

由于

Answer 1

不需要Jquery。使用Angular DomSanitizer

import { DomSanitizer} from '@angular/platform-browser';
    export class VideoplayerComponent implements OnInit {
        controllerSrc: any;
         constructor(private sanitizer: DomSanitizer) {}

        ngOnit(){
           const url='https://www.videoindexer.ai/embed/insights/0c7357bd5c/?widgets=people';
           this.controllerSrc = this.sanitizer.bypassSecurityTrustResourceUrl(url);

        }
}


<iframe class="controls" width="580" height="780" [src]="controllerSrc" frameborder="0" allowfullscreen></iframe>

请参阅文档Angular DomSanitizer

Answer 2

首先，在学习的过程中，从头脑中删除jQuery   Angular2或+，

否则，你永远不会知道如何以Angular方式做到这一点。

这里没有jQuery就可以实现同样的目标

组件方：

// to remove error : Error: unsafe value used in a resource URL context
import { DomSanitizer } from '@angular/platform-browser';

export class VideoplayerComponent implements OnInit {
    controllerSrc: string;
    constructor(sanitizer: DomSanitizer){}

    ngOnit(){
        this.controllerSrc = this.getSafeUrl('https://www.videoindexer.ai/embed/insights/0c7357bd5c/?widgets=people');
    }

    // to remove error : Error: unsafe value used in a resource URL context
    getSafeUrl(url) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(url)
    }

    changeIframe() {
        this.controllerSrc = this.getSafeUrl('your-new-url');
    }

}

模板方：

<button (click)='changeIframe()'></button>

<iframe class="controls" width="580" height="780" [src]="controllerSrc" frameborder="0" allowfullscreen></iframe>

我试图动态更改iframe的网址，但我得到一个错误：资源网址中使用的不安全的值

2 个答案: