js iframe通过postMessage实现父子页面传值

最新推荐文章于 2025-06-18 17:46:05 发布

liuyan1106_

最新推荐文章于 2025-06-18 17:46:05 发布

阅读量9.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ES5/ES6 文章标签： js

本文链接：https://blog.youkuaiyun.com/liuyan1106_/article/details/108320273

ES5/ES6 专栏收录该内容

4 篇文章

订阅专栏

一、语法

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>