【前端跨域】postMessage解决iframe页面跨域问题的最佳实践

背景：有两个项目，一个基于Vue开发，一个基于React开发。Vue项目中某个页面（称为父页面）通过iframe标签嵌入了React项目的某个页面（称为子页面）。现在子页面要和父页面要进行通信，传递数据。

关键技术

跨域方式还挺多的，本次主要通过H5提供的postMessage()方法解决上面提到的问题。

最佳实践

初步方案

• Vue 父页面核心代码

// PostMessageVueSide.vue
<template>
  <div class="container border-2 border-gray-400 border-solid">
    <h1>这是基于Vue的页面（父页面）</h1>
    <p><span class="text-red-500">传递的数据：</span>{{message}}</p>
    <div class="w-full h-full">
      <iframe class="w-full h-full"  ref="parentPage" scrolling="no" src="http://localhost:3001"></iframe>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: 'vue page data'
    }
  },
  mounted() {
    this.$refs.parentPage.contentWindow.postMessage(this.message, '*');
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: calc(100vh - 100px);
}
</style>

基于Vue的项目启动服务后的地址在http://localhost:8080/。

http://localhost:3001是基于React的项目启动服务后的地址。

当页面挂在完成，我们通过$fefs获取iframe实例，并通过contentWindow.postMessage向子页面发送数据。

• React 子页面核心代码

// PostMessageReactSide.jsx
import React, {useEffect, useState} from 'react';

import './Home.scss'

const Home = () => {
  const [message, setMessage] = useState('');

  useEffect(() =>{
    window.addEventListener('message', (e) =>{
      console.log(e.data);
      setMessage(e.data);
    })
   }
  );
  
  return (
    <div className="container">
      <p>这是基于React的页面（子页面）</p>
      <p><span className="received-data">收到的数据：</span>{message}</p>
    </div>
  )
}

export default Home;

React界面基于React Hook实现。

在useEffect函数中我们监听message事件，并试图获取从父页面发来的数据。

• 界面效果
  

从网上看到的大多数基于postMessage跨域的教程基本上都是这个流程。

但是，从页面效果可看到，我们的子页面并没有拿到从父页面拿到数据。

为什么呢？请往下看：

我们进行debug，可以看到当我们准备要向子页面发送数据时，此时子页面还没加载出来。

因此，如果我们想要在子页面拿到父页面的数据，必须等子页面加载完成后，父页面再向子页面发送数据。

改善方案

通过load事件，在页面加载完成时，再发送数据。

// PostMessageVueSide.vue
 mounted() {
    console.log('mounted');
    const parentPage = this.$refs.parentPage;
    parentPage.addEventListener('load', ()=> {
      parentPage.contentWindow.postMessage(this.message, '*');
    })
    // this.$refs.parentPage.contentWindow.postMessage(this.message, '*');
  }

通过debug可以看到当我们准备从父页面发送数据时，子页面已经渲染出来。

因此，接下来我们就拿到了父页面的数据：

在实际工作的项目中，React界面往往没有这么简单，页面需要加载的东西很多。

在实际工作中用上面的方案可能是下面的结果：

所以，用这种方案，我们在子页面还是不能拿到数据。

寻求其他方案

我们还可以用定时器来延时发送数据。这里我们延时设置为3000ms

// PostMessageVueSide.vue
mounted() {
    console.log('mounted');
    setTimeout(()=>{
      this.$refs.parentPage.contentWindow.postMessage(this.message, '*');
    }, 3000);
}

这种方案是可行的，数据是能拿到。

但因为子页面加载较快，过了一会儿数据才显示。

这种方案的缺陷很明显，我们不确定子页面究竟要多少ms才能加载完成。

终极方案

既然上面我们不确定子页面究竟要多少ms才能加载完成。那我们可以等子页面加载完成时向父页面发送一个信号，告诉父页面“我已经加载完成，你可以向我发送数据了”。

那这里我们就需要从子页面通过postMessage向父页面发送数据了。

在子页面中我们在useEffect中发送数据通知父页面，子页面已加载完成。

// PostMessageReactSide.jsx
const Home = () => {
  const [message, setMessage] = useState('');

  useEffect(() => {
    // 页面加载已完成，通知父页面
    console.log('child page mounted');
    window.parent.postMessage({retcode: 200}, '*');   
  });

  useEffect(() =>{
    window.addEventListener('message', (e) =>{
      console.log(e.data);
      setMessage(e.data);
    })
   }
  );
  
  return (
    <div className="container">
      <p>这是基于React的页面（子页面）</p>
      <p><span className="received-data">收到的数据：</span>{message}</p>
    </div>
  )
}

父页面中监听message，当拿到子页面的数据时（说明子页面已加载完成），我们就向子页面发送数据。

// PostMessageVueSide.vue
  mounted() {
    console.log('parent page mounted');
    window.addEventListener('message', (e) => {
      if (e.data.retcode === 200) {
        this.$refs.parentPage.contentWindow.postMessage(this.message, '*');
      }
    })
  }

刷新页面：

完美解决了问题。

展望方案

父子页面来回传递数据容易造成数据混乱，难以管理，数据流不明确。

我们可以设计一个顶层数据点，让父页面和子页面都从这个顶层数据点拿数据及修改数据等。这样可以保证父子界面拿到的数据是同步的。

例如，父子页面都可以从后台调统一接口拿数据，而不用让数据在父子页面间来回传递。

总结

用postMessage解决跨域问题最关键的点就是，父页面要在子页面加载完成时再发送数据，否则子页面可能收不到数据。

源码

• https://gitee.com/LynnHg/best-practice-demo