河图父子页面传值

河图为父页面

配置

1. 在大屏设计器中添加 按钮组、通用标题等具备点击事件的组件。示例以 按钮组 为例。

   

• 变量池中添加变量 iframeValue，按钮组在交互事件将值绑定到变量上

  

2. 在大屏设计器中添加 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>子页面</title>
  </head>
  
  <body>
    <h1>子页面值：</h1> 
    <h1 id="childrenValue"></h1> 
  </body>
  <script>
  
    window.addEventListener("message", function (e) {
      console.log(e.data.hetu.vars.iframeValue);
      document.getElementById("childrenValue").innerText = e.data.hetu.vars.iframeValue;
    });
  
  </script>
  
  </html>

3. 当嵌入页面为外部页面时，在节点编程画布中添加 按钮组 组件和 触发器 逻辑节点，在 触发器 中编写传值代码。

   

       const iframe = document.querySelector('iframe');
       if (iframe) {
         iframe.contentWindow.postMessage(
           {
             hetu: {
               vars: {
                 'iframeValue': data.text,
               }
             }
           },
           "*"
         );
       }
   
       return true;

效果预览

1. 嵌入河图页面时

   

2. 嵌入外部页面时

   

河图为子页面

配置

1. 父页面配置

   • 父页面为外部页面时，需在父页面添加值传递的方法

   <!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>主页面</title>
     </head>
   
     <body>
       <h1>主页面</h1>
       <button onclick="btnClick()">按钮</button>
       <br />
       <iframe width="1000px" height="200px" id="iframe"
         src="https://hetucloud.taiji.com.cn/screen/share/index.html#/TJ16061f9fcefc4c9ab6ef5605af0dd7"></iframe>
   
       <h1>子页面值：</h1> 
       <h1 style="color:red" id="childrenValue"></h1> 
     </body>
     <script>
       var num = 0;
       function btnClick() {
         const iframe = document.getElementById("iframe");
         if (iframe) {
           // 向河图页面传值，若不需要向河图页面传值，可不添加此方法
           iframe.contentWindow.postMessage(
             {
               hetu: {
                 vars: {
                   'iframeValue': num,
                 }
               }
             },
             "*"
           );
         }
         num++;
       }
   
       // 接收河图页面传来的值，若不需要接收河图传来的值，可不添加此方法
       window.addEventListener("message", function (e) {
         console.log(e.data.hetu.vars.iframeValue);
         document.getElementById("childrenValue").innerText = e.data.hetu.vars.iframeValue;
       });
   
     </script>
   
     </html>

   • 父页面为河图页面时，在大屏父页面中添加 iframe、 通用标题。

     
     • iframe 组件，用来显示嵌入河图的页面。
     
     • 变量池中添加变量 iframeValue
     
     • 通用标题 组件，子页面传来的变量值。

2. 在大屏子页面设计器中添加 按钮组、通用标题 组件。

   

3. 在大屏子页面节点编程画布中添加 按钮组 组件和 触发器 逻辑节点，在 触发器 中编写传值代码。

   

   window.parent.postMessage(
       {
         hetu: {
           vars: {
             'iframeValue': data.text,
           }
         }
       },
       "*"
     );
   return true;

效果预览

1. 外部页面嵌入河图页面时

• 点击主页面上的按钮，外部页面给河图页面传值

  

• 点击河图页面上的按钮组，河图页面给外部页面传值

  

2. 河图页面嵌入河图页面时