Angular2 - iframe.contentWindowの取得に問題があり、postMessage（）を呼び出すときにエラーが発生する

Question

私はAngular 2プロジェクトとNodeJsプロジェクトを持っています。 Angular 2アプリにiframeがあり、その中にNodeJSアプリを表示したいと思います。 Angular2からNodeJsにpostMessage（）メソッドを使い、NodeJsからAngular2に戻したいと思います。 Angular2 Addressはhttp://localhost:3001、NodeJsアドレスはhttp://localhost:3005です。

角2では、このようなコンポーネントにテンプレートがあります。

template: `<iframe id="ifrm" #ifrm [src]="iframeURL()" width="500" height="200"> <p> Your browser does not support iframes</p> </iframe> ` 

---

iframeURL（）メソッド本体がテンプレートで使用されます。

iframeURL() { 
return this.sanitizer.bypassSecurityTrustResourceUrl('http://localhost:3005'); 
} 

---

私はAngular2にiframe内のページを見ることができるアプリケーションを実行すると。しかしiframeのcontentWindow（下のコード）を取得したいとき、私は以下の説明を得ます（エラーではありません）。

@ViewChild('ifrm') iframe: ElementRef; 

例外処理：DOMException：原点にフレームをブロックされた "http://localhost:3001" クロスオリジン・フレームをアクセスします。

以下のようなpostMessage（）メソッドを使用すると例外が発生します。

this.iframe.nativeElement.contentWindow.postMessage('{}','http://localhost:3005'); 

'DOMWindow' オン 'のpostMessage' を実行できませんでした：指定されたターゲット原点 は（ 'http://localhost:3005 '）（' http://localhost:3001'）受信者 ウィンドウの原点と一致していません。

---

ところで、このコンポーネントページを角度ルーティングを使用して開きます。 全体のコンポーネントコードは以下の通りです：

import {Component, OnInit, ElementRef} from '@angular/core'; 
import {DomSanitizer} from '@angular/platform-browser' 
import {ViewChild} from "@angular/core/src/metadata/di"; 

@Component({ 
    selector: 'app', 
    template: `<div> <iframe id="ifrm" #ifrm [src]="iframeURL()" width="500" height="200" style="/*display:none;*/"> <p> Your browser does not support iframes</p> </iframe> </div>` 
}) 
export class AppComponent implements OnInit{ 
    constructor(private sanitizer: DomSanitizer){} 

    @ViewChild('ifrm') iframe: ElementRef; 

    ngOnInit(){ 
     console.log(this.iframe.nativeElement.contentWindow); 
     this.iframe.nativeElement.contentWindow.postMessage('{}', 'http://localhost:3005'); 
    } 

    iframeURL() { 
     return this.sanitizer.bypassSecurityTrustResourceUrl('http://localhost:3005'); 
    } 
} 

Answer 1

これは私が問題を処理する方法です。 ngAfterViewInit以降はpostMessageのみです。それはあなたのために動作しないかもしれないが、あなたはそれを試すことができます。

<iframe #iframe class="iframe-map" (load)="onIframeLoad()"></iframe> 

import { Component, AfterViewInit, ChangeDetectionStrategy, ViewChild, ElementRef, Inject, Optional, Renderer } from '@angular/core'; 
import { URLSearchParams } from '@angular/http'; 
import { DialogRef, ModalComponent } from 'angular2-modal'; 
import { BSModalContext } from 'angular2-modal/plugins/bootstrap'; 
import { stringify } from 'querystringify'; 

import { AmapPickerOptions, AmapLocation, AMAP_PICKER_OPTIONS, AMAP_KEY, stringify as amapstringify } from '../amap'; 

export class AmapPickerModalData extends BSModalContext { 
    public center: string; 
} 

@Component({ 
    selector: 'amap-picker-modal', 
    templateUrl: './modal.component.html', 
    styleUrls: ['./modal.component.css'], 
    changeDetection: ChangeDetectionStrategy.OnPush, 
}) 
export class AmapPickerModalComponent implements ModalComponent<AmapPickerModalData>, AfterViewInit { 

    @ViewChild('iframe') iframe: ElementRef; 

    receiveMessage: EventListener; 

    private isInited: boolean; 

    constructor(
    @Inject(AMAP_KEY) private key: string, 
    @Optional() @Inject(AMAP_PICKER_OPTIONS) private options: AmapPickerOptions, 
    private renderer: Renderer, 
    public dialog: DialogRef<AmapPickerModalData>) { } 

    ngOnInit() { 
    let center = this.dialog.context.center; 
    this.options = Object.assign({ key: this.key }, this.options, center && { center }); 
    let query = stringify(this.options, true); 
    this.renderer.setElementProperty(this.iframe.nativeElement, 'src', `https://m.amap.com/picker/${query}`) 

    this.receiveMessage = (event: MessageEvent) => { 
     if (event.origin !== 'https://m.amap.com') { 
     return; 
     } 
     this.dialog.close(amapstringify(<AmapLocation>event.data)); 
    }; 
    } 

     ngAfterViewInit() { 
     this.isInited = true; 
     } 

    ngOnDestroy() { 
    window.removeEventListener('message', this.receiveMessage); 
    } 

    onIframeLoad() { 
    if (this.isInited) { 
     setTimeout(() => { 
     this.iframe.nativeElement.contentWindow.postMessage('hello', 'https://m.amap.com/picker/'); 
     window.addEventListener('message', this.receiveMessage, false); 
     }, 500); 
    } 
    } 

}