第一章 问题描述
当通过iframe的方式把报表嵌入到业务系统时，我们提供了url传参登录的方式方便嵌入，但是有时想要在父页面获取iframe报表的参数值，我们提供了通过postMessage的方式获取参数值
第二章 代码说明
嵌入标签
<iframe id="previewcontent"
src="http://10.101.28.249:8081/report/Report-EntryAction.do?reportId=REPORT-173632272585306554493&loginname=admin&token=QXJwdDEyMystKi8=">
</iframe>
通过loginname和token传入用户信息以便登录
完整页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>嵌入报告页面</title>
<script>
function getParam() {
var iframe = document.getElementById('previewcontent');
iframe.contentWindow.postMessage("getReportParamData", '*');
}
window.onload = function () {
window.addEventListener('message', function (event) {
console.log(event.data); // 返回参数数据处理
});
}
</script>
</head>
<body>
<div class="container">
<iframe id="previewcontent"
src="http://10.101.28.249:8081/report/Report-EntryAction.do?reportId=REPORT-173632272585306554493&loginname=admin&token=QXJwdDEyMystKi8=">
</iframe>
<input type="button" class="button" onclick="getParam()" value="获取">
</div>
</body>
</html>
通过console.log输出返回信息，展示效果如下图
