# iframe 父子页面传值

实现了 iframe 子父界面传值的功能。

前言：已存在一个 iframe 界面。

iframe

上图中的示例中 iframe 代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>iframe页面</title>
  </head>

  <body>
    <h1>iframe页面</h1>
    <h1 id="text"></h1>
    <button onclick="btnClick()">按钮</button>
  </body>
  <script>
    window.addEventListener('message', function(event) {
      var result = event.data;
      document.getElementById('text').innerHTML = result.value;
    });
    var num = 0;
    function btnClick() {
      window.parent.postMessage(
        {
          from: window.name,
          variable: 'title',
          value: 'iframe事件' + num++
        },
        '*'
      );
    }
  </script>
</html>

window.parent.postMessage()用法

单个变量传递

 window.parent.postMessage(
    {
      from: window.name
      variable: 'title',         // 变量名
      value: 'iframe变量' + num  // 变量值
    },
    '*'
  );

多个变量传递

  window.parent.postMessage(
    {
      from: window.name,
      vars: {
        title: 'iframe变量',      // [变量名]: [变量值]
        num: num
      }
    },
    '*'
  );

注：from 请与设计器中 iframe 组件名称属性保持一致