onload使用iframe發生多次

在Angular 2中存在一些問題，即時製作一個具有iframe的組件，並從輸入中設置源。但是，當它加載時，它會加載兩次，其中一次使用src=''，另一次使用實際的輸入網址。onload使用iframe發生多次

我似乎無法弄清楚如何將iframe的網址綁定到視圖中。

export class ExternalComponent implements OnInit { 
    @Input() 
    url: string; 

    private src: any; 

    constructor(private sanitizer: DomSanitizer) { 

    } 

    ngOnInit()  
    { 
     this.src = this.sanitizer.bypassSecurityTrustResourceUrl(this.url) 
    } 

    onLoad() { 

    } 
}

HTML：

<iframe [src]="src" frameBorder="0" (load)="onLoad()"></iframe>

繁殖：http://plnkr.co/edit/Dnpmv6X2IO3WGQAg0372?p=preview

感謝

來源

2017-03-08 Zaixu

iframe在哪裏？ –

它被類代碼隱藏，它現在在那裏。 – Zaixu

你可以嘗試的屬性綁定，這是不是在所有如果增值是null

<iframe [attr.src]="src ? src = null" frameBorder="0" (load)="onLoad()"></iframe>

更新

如https://stackoverflow.com/a/15880489/217408 說明的，當事件處理程序被添加到元件的之前被添加到DOM。這似乎是Angular正在做的事情。

添加事件處理程序後，命令式的元素被添加到DOM

Plunker example

忽略事件，而url是空

Plunker example

來源

2017-03-08 17:28:54

不幸的是，即便如此，仍然會發生。 – Zaixu

你可以在Plunker中重現嗎？ –

http://plnkr.co/edit/Dnpmv6X2IO3WGQAg0372?p=preview this reproduces – Zaixu

'的onLoad執行' 在這個例子中只運行一次（http://plnkr.co/edit/wRZTH8?p=preview）。你確定還有其他事情沒有進行嗎？

import { Component , OnInit } from '@angular/core'; 
import { DomSanitizer} from '@angular/platform-browser'; 

@Component({ 
    selector: 'my-app', 
    template: `<iframe [attr.src]="url ? url : null" frameBorder="0" (load)="onLoad()" style="width:200px;height:200px"></iframe>` 
}) 
export class AppComponent implements ngOnInit{ 
    public url: any; 

    constructor(private sanitizer:DomSanitizer){ 

    } 

    ngOnInit()  
    { 
     this.url =  this.sanitizer.bypassSecurityTrustResourceUrl('http://www.nekkon.com'); 
    } 

    onLoad() { 
     console.log('onLoad executed'); 
    } 
}

來源

2017-03-09 00:06:05 nekkon

這是我的更高級的例子。 http://plnkr.co/edit/Dnpmv6X2IO3WGQAg0372?p=preview – Zaixu

onload使用iframe發生多次

回答

相關問題