iframe配合postmessage注意点

不积跬步,无以至千里.

于 2020-09-08 15:32:12 发布

阅读量525

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Mweb_demo/article/details/108469147

JavaScript 专栏收录该内容

27 篇文章

订阅专栏

本文探讨了在两个不同系统A和B中使用iframe进行页面嵌入的原因及实现方式，详细介绍了如何通过postMessage解决跨域通信问题，并提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用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, '@@@@@@');
    };
  }