# 第三方嵌河图页面
# 父向子页面传值
# 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="1000px"
id="iframe"
src="http://127.0.0.1:4200/screen/share/index.html#/TJd0c060f84aca458689b2fc4e54fc59"
></iframe>
</body>
<script>
var num = 0;
function btnClick() {
const iframe = document.getElementById("iframe");
iframe.contentWindow.postMessage(
{
from: "iframeHide", // 河图内iframe的名称保持一致
vars: {
//河图内iframe组件配置的交互变量名称保持一致,可传多值
name: "测试" + num,
value: 234,
},
},
"*"
);
num++;
}
</script>
</html>
# 2. 新建大屏配置下图所示的 iframe 组件和多行文本。
多行文本配置如下：
iframe 组件配置如下：
# 3. 预览，查看效果。
点击按钮如下：
# 子向父页面传值
实现从河图页面中传值到外层第三方页面
# 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>
<br />
<h1 id="text"></h1>
<br />
<iframe
width="1000px"
height="1000px"
id="iframe"
src="http://192.168.58.127:9017/screen/share/index.html#/TJ0809aa77eb344351a3b3b69d44b7e6"
></iframe>
</body>
<script>
window.addEventListener("message", function (event) {
var result = event.data;
document.getElementById("text").innerHTML = result.value;
});
</script>
</html>
# 2. 新建大屏配置下图所示的按钮组。
按钮组配置如下：
在节点编程页面给按钮组绑定转换器如下：
window.parent.postMessage(
{
value: data.text,
},
"*"
);
return data;
# 3. 预览，查看效果。
点击不同的按钮如下：
