iframe跨域通信&&本地通信&&高度自适应_iframe跨域问题本地-CSDN博客

本文链接：https://blog.csdn.net/yangxiaowan313/article/details/126145297

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>parent</title>
</head>

<body>
  <h1>parent</h1>
  <button type="button" onclick="change()">change</button>
  <iframe src="https://test.html" id="myIframe"></iframe>
  <script>
    let theme = 'dark', contentWindow;
    let iframe = document.getElementById("myIframe")
    iframe.onload = function () {
      contentWindow = iframe.contentWindow
      console.log('loaded',iframe)
      contentWindow.postMessage('我是父页面', 'https://test.html')

    }
  </script>
</body>

</html>

子页面加上如下代码、、
window.addEventListener('message', function (event) {
      console.log(event)
      // event.origin: 消息来源(发消息的人)
      // 正式环境下一般都需要做消息来源的过滤以免出现安全问题
      document.getElementById('message').innerHTML =
        "收到" + event.origin + "消息：" + event.data;
    }, false);

 iframe.contentWindow.postMessage('我是父页面', "*")  	子页面不变

子页面：
window.parent.postMessage("我是子页面传过来的值", '*');
父页面接收消息：
window.addEventListener('message', function (e) {
                console.log(e.data)
})

  var iframe = document.getElementById("myiframe")
        iframe.onload = () => {
            var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
        iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
        }
如果在本地打开会报错，需要在服务下打开