iframe父子页面通讯解决方案-白红宇

iframe父子页面通讯解决方案

阅读量：7081 次

发布时间：2019-06-28

本文共 3375 字，大约阅读时间需要 11 分钟。

#有两点要注意

##onload加载完成再进行操作

##子页面延时获取

#####场景是这样的，父级页面嵌套了多个iframe，report_six.html子级页面按需加载数量，且每个子页面渲染不同的数据。

#####父页面for循环加载子页面数量，动态生成id，根据对应的id，传值给对应的子级页面元素，一定要写在onload里面

下面是父页面

```python

<body>

</body>

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`接收数据，为了确定接收到参数，设置一个定时器，不等于默认值的情况下就表示接收成功，接收成功之后清除定时器执行业务代码

下面是子页面

```python

<body>

</section>

var timer = setInterval(function(){

var rank_value = document.getElementById("rank").value;

if(rank_value != 'a'){

clearInterval(timer);

//执行代码

}

},2000);

</script>

</body>

```

转载于:https://my.oschina.net/af666/blog/1831063

你可能感兴趣的文章

洛谷—— P2895 [USACO08FEB]流星雨Meteor Shower

搭建高可用mongodb集群—— 副本集1

查看>>

分布式助手Zookeeper（一）

查看>>

redis源码分析1------dict的实现

查看>>

Spring HttpIvoker实现Java的远程调用

查看>>

list usage of python

查看>>

某互联网企业技术发展史（一）技术选型与服务器采购