使用iframe页面父子传参数

son.html

<button onclick="handleEvent()">向父页面发送信息</button>
<p>子页面</p>
<script>
   // 注册消息事件监听，接受子元素给的数据
   window.addEventListener('message', (e) => {
      console.log(e)
        console.log(e.data);
    }, false);

    function handleEvent() {
        // 向父页面发消息
        var a = 90
        var b =100
        window.parent.postMessage(a, '*');
        window.parent.postMessage(b, '*');
    }

</script>

father.html

<div style="margin-bottom: 20px;">
    <button onclick="handleEvent()">向子页面发送信息</button>
</div>
<iframe src="son.html" id="iframe"></iframe>
<script>
    function handleEvent() {
        // iframe的id
        
        var f = document.getElementById('iframe');
        // 触发子页面的监听事件
        f.contentWindow.postMessage('父页面发的消息', '*');
    }

    // 注册消息事件监听，接受子元素给的数据
    window.addEventListener('message', (e) => {
        console.log(e.data);
    }, false);
</script>

其中

window.parent.postMessage({"stateNum": stateNum ,"caseId": caseId }, 'http://xxxxx:8080');

otherWindow.postMessage(message, targetOrigin, [transfer]);

参数	说明
otherWindow	其他窗口的一个引用，比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。
message	将要发送到其他 window的数据。
targetOrigin	指定哪些窗口能接收到消息事件，其值可以是 *（表示无限制）或者一个 URI。
transfer	可选，是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。