iframe父子页面通讯解决方案
佀无极 2018-08-30 10:35:09 浏览36 评论0- 云栖社区
- python
- 前端与交互设计
- javascript
- html5
- js
- 解决方案
- html
- type
- input
摘要： 有两点要注意 onload加载完成再进行操作 子页面延时获取 场景是这样的，父级页面嵌套了多个iframe，report_six.html子级页面按需加载数量，且每个子页面渲染不同的数据。 父页面for循环加载子页面数量，动态生成id，根据对应的id，传值给对应的子级页面元素，一定要写在onload里面 下面是父页面 <body> <iframe src="report_one.
有两点要注意
onload加载完成再进行操作
子页面延时获取
场景是这样的，父级页面嵌套了多个iframe，report_six.html子级页面按需加载数量，且每个子页面渲染不同的数据。
父页面for循环加载子页面数量，动态生成id，根据对应的id，传值给对应的子级页面元素，一定要写在onload里面
下面是父页面
<body>
<iframe src="report_one.html" frameborder="0" width="630" height="891"></iframe>
<iframe src="report_two.html" frameborder="0" width="630" height="891"></iframe>
<iframe src="report_three.html" frameborder="0" width="630" height="891"></iframe>
<iframe src="report_four.html" frameborder="0" width="630" height="891"></iframe>
<iframe src="report_five.html" frameborder="0" width="630" height="891"></iframe>
<iframe id="a_0" src="report_six.html" frameborder="0" width="630" height="891"></iframe>
<iframe id="a_1" src="report_six.html" frameborder="0" width="630" height="891"></iframe>
<iframe id="a_2" src="report_six.html" frameborder="0" width="630" height="891"></iframe>
<iframe id="a_3" src="report_six.html" frameborder="0" width="630" height="891"></iframe>
<iframe id="a_4" src="report_six.html" frameborder="0" width="630" height="891"></iframe>
<iframe id="report_ten" src="report_ten.html" frameborder="0" width="630" height="891"></iframe>
<iframe id="report_eleven" src="report_eleven.html" frameborder="0" width="630" height="891"></iframe>
<iframe id="report_nine" src="report_nine.html" frameborder="0" width="630" height="891"></iframe>
</body>
<script src="./js/jquery-2.1.4.js"></script>
<script>
if(obj.type == 3){
$('<iframe src="report_one.html" frameborder="0" width="630" height="891"></iframe>').appendTo('body');
$('<iframe src="report_two.html" frameborder="0" width="630" height="891"></iframe>').appendTo('body');
$('<iframe src="report_three.html" frameborder="0" width="630" height="891"></iframe>').appendTo('body');
$('<iframe src="report_four.html" frameborder="0" width="630" height="891"></iframe>').appendTo('body');
$('<iframe src="report_five.html" frameborder="0" width="630" height="891"></iframe>').appendTo('body');
var rank_a = obj.k.length;
for(var i = 0;i < rank_a;i++){
$('<iframe id="a_' + i + '" src="report_six.html" frameborder="0" width="630" height="891"></iframe>').appendTo('body');
}
$('<iframe id="report_ten" src="report_ten.html" frameborder="0" width="630" height="891"></iframe>').appendTo('body');
$('<iframe id="report_eleven" src="report_eleven.html" frameborder="0" width="630" height="891"></iframe>').appendTo('body');
var cancer = obj.c.length;
if(cancer > 0){
$('<iframe id="report_nine" src="report_nine.html" frameborder="0" width="630" height="891"></iframe>').appendTo('body');
}
window.onload = function(){
var rank_a = obj.m07.dis_risk.length;
for(var i = 0;i < rank_a;i++){
$('#a_' + i).contents().find('#rank').val(i);
}
$('#report_ten').contents().find('#change').html('四');
$('#report_eleven').contents().find('#change').html('五');
$('#report_nine').contents().find('#change').html('六');
}
}
</script>
子级页面带有默认值的元素input#rank接收数据，为了确定接收到参数，设置一个定时器，不等于默认值的情况下就表示接收成功，接收成功之后清除定时器执行业务代码
下面是子页面
<body>
<section>
<div id="mainChart" class="chart"></div>
</section>
<input type="hidden" id="rank" value="a"/>
<script src="./js/echarts-all-3.js"></script>
<script>
var timer = setInterval(function(){
var rank_value = document.getElementById("rank").value;
if(rank_value != 'a'){
clearInterval(timer);
//执行代码
}
},2000);
</script>
</body>
用云栖社区APP，舒服~
【云栖快讯】诚邀你用自己的技术能力来用心回答每一个问题，通过回答传承技术知识、经验、心得，问答专家期待你加入！ 详情请点击- 分享到:
