您现在的位置是：首页 > 文章详情

iframe父子页面通讯解决方案

日期：2018-08-29点击：435收藏

有两点要注意

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>

原文链接：https://yq.aliyun.com/articles/630631

关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。