postMessage 收到消息类型 “webpackWarnings“

简介: 【7月更文挑战第30天】

场景描述:
当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

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

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

相关文章
postMessage 收到消息类型 “webpackWarnings“
postMessage 收到消息类型 “webpackWarnings“
|
6月前
|
前端开发 JavaScript
解决Ajax发送DELETE请求时后台无法接收到参数的问题(Restful风格)
解决Ajax发送DELETE请求时后台无法接收到参数的问题(Restful风格)
174 0
|
存储 Java
WebSocket区分不同客户端方法
WebSocket区分不同客户端方法
447 0
|
JSON 移动开发 网络协议
Web | 什么是 RPC 消息协议 ?
Web | 什么是 RPC 消息协议 ?
184 0
|
XML 前端开发 JavaScript
Ajax --- 客户端与服务器端之间传递数据
Ajax --- 客户端与服务器端之间传递数据
117 0
|
新零售 Java 区块链
web3j发送异步交易时不能解析方法`executeTransactionAsync`?
我正试图用web3j库发送一个交易到以太坊区块链,得到一个错误,我必须用异步发送它。当用异步发送它时,会得到一个函数不存在的错误。
1900 0