一、语法

otherWindow.postMessage(message, targetOrigin);
  • otherWindow 其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。
  • postMessage中第一个参数代表要传回的值，第二个是限定消息接收范围(域名设置)，不限制使用 '*’。

二、父页面向子页面传值

父页面

function handleEvent() {
      // iframe的id
      var id = document.getElementById('if');
      // 触发子页面的监听事件
      id.contentWindow.postMessage('我是父元素传给子元素的数据哦！', '*');
    }

子页面

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

三、子页面向父页面传值

子页面

function handleEvent() {
      // 触发父页面的监听事件
      window.postMessage('我是子元素传给父元素的数据哦！', '*');
    }

父页面

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

四、实例

父页面a.html

<!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>父页面</title>
</head>

<body>
  <button onclick="handleEvent()">向子页面发送信息</button>
  <p>我是父页面</p>
  <iframe src="b.html" id="if"></iframe>
  <script>
    function handleEvent() {
      // iframe的id
      var id = document.getElementById('if');
      // 触发子页面的监听事件
      id.contentWindow.postMessage('我是父元素传给子元素的数据哦！', '*');
    }

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

</html>

子页面b.html

<!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>子页面</title>
</head>

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

    function handleEvent() {
      // 触发父页面的监听事件
      window.postMessage('我是子元素传给父元素的数据哦！', '*');
    }
  </script>
</body>

</html>
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

索鸾 AI·CRM 系统深度评测：原生 AI 驱动下的销售效能实测

avatar 2048 AI社区
cover

LangChain写Demo很顺，为什么一上线团队就集体翻车？

avatar 2048 AI社区
cover

财务流程自动化软件有哪些？2026年8款主流产品对比与选型建议

avatar 2048 AI社区