iframeはpostmessageに合わせて注意します.

3534 ワード

iframeを使用する理由:    二つの異なるシステムで現存しています.AシステムとBシステムです.ある原因で、AシステムはBシステムページの個別ページを呼び出すため、iframeを導入しました.そして二つのシステムの間に通信が必要で、ドメインをまたぐ問題を設計すると、postmessageがあります.システム内のコードの例:
 <div style="height:500px;">
  <iframe style="width:100%;height:100%;" src={
     this.iframeUrl} ref="xxxIframe" title="xxx" name="xxx" id="xxx" />
 </div>
loadIform(): void {
     
    const self: any = this;
    const iFrame = self.$refs.xxiframe;
    if (!iFrame) {
     
      return;
    }

    iFrame.onload = (): void => {
     
      setTimeout(() => {
     
        iFrame.contentWindow.postMessage(  , '*');
      }, 600);
    };
    window.onmessage = (event) => {
     
        console.log(event.data, '@@@@@@');
    };
  }
注意点:私のは一つのポップアップフレームで、それから埋め込まれたiframeなので、遅延が追加されました.異なるソースの判断に注意します.postmessage詳細アドレス