网站伪静态是什么意思/百度推广下载安装

场景描述：

        当A系统中的parent页面使用iframe内嵌C系统的child页面，并且在parent页面中通过postMessageg给child页面发送消息时，如果C系统中使用了webpack,则webpack也会给child页面发送消息 ，消息类型为webpackWarnings。那么如何使parent页面和child页面正确通信呢，主要分为以下两步。

1，parent页面要在iframe 加载完成之后，再给child页面发消息，同时约定好发送数据的格式

// parent.vue
<iframe
      ref="iframeRef"
      width="100%"
      class="iframe-msg-content"
      src="my-src"
      frameborder="0"
    ></iframe>
    <script setup>
    import {onMounted, onUnmounted} from 'vue';
    

    onMounted(()=>{
    iframeRef.value.onload = () => {
        // iframe 加载完成之后，获取iframe 内嵌子页面窗口
        const childWindow = iframeRef.value.contentWindow;
        const messageData = {
          type: '约定的消息类型',
          data: 要发送的数据,
        };
        // postMessage 发送字符串类型的数据才能被目标窗口接收
        childWindow.postMessage(JSON.stringify(messageData), 'ip+端口');
      };
      window.addEventListener('message', handleMessage, false);
    });
    
    onUnmounted(() => {
      window.removeEventListener('message', handleMessage, false);
    });
    </script>
    
    // 先给一个默认的宽高
    .iframe-msg-content{
    width: 100%;
    height: 400px
    }

 2，child页面监听message 事件获取来自parent页面发送的数据

// child.html最外层元素 .page-container
<div class="page-container" ref="pageContainer"></div>

<script setup lang="ts">
import {ref,reactive, onMounted, onUnmounted} from "vue";
const pageContainer = ref();
const state = reactive({
    
})

/**
     * @description: 消息处理
     * @return {*}
     */
    const handleMessage = (event:MessageEvent) => {
    // 因为webpack 发送的数据是对象类型，parent 页面发送的是经过JSON.stringify转换的字符串类型的
     // 过滤来自webpack发送的possMessage 消息
      if (Object.prototype.toString.call(event.data) === '[object String]') {
        const message = JSON.parse(event.data);
        if (message?.type === '约定好的数据type') {
            // 处理来自parent 页面的数据
        }
      }
    };

onMounted(()=>{
   window.addEventListener('message', handleMessage);
})

 onUnmounted(() => {
      window.removeEventListener('message', handleMessage);
    });
</script>

注意：

1，postMessage 发送字符串类型的数据才能被内嵌子页面接收。

2，通过类型过滤webpack发送的消息。