有两点要注意
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>