iframe父子页面通讯解决方案

简介:

有两点要注意

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>
目录
相关文章
|
2月前
iframe的父子页面通信
【10月更文挑战第2天】
94 2
|
2月前
|
JavaScript 前端开发
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
|
7月前
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 - 父子组件之间的通信(三十八)
【微信小程序】-- 自定义组件 - 父子组件之间的通信(三十八)
|
7月前
|
JavaScript
Vue 父子组件通信 兄弟组件通信 深层组件通信 方式一览
Vue 父子组件通信 兄弟组件通信 深层组件通信 方式一览
50 0
|
7月前
|
存储 前端开发 JavaScript
多个页面之间如何进行数据传递
多个页面之间如何进行数据传递
210 0
|
存储 API UED
uniapp跨页面传递数据的几种方式
uniapp跨页面传递数据的几种方式
896 0
|
JavaScript
常见的数据交互之跳转页面传值
常见的数据交互之跳转页面传值
52 0
|
前端开发 JavaScript 安全
带你读《现代Javascript高级教程》——前端跨页面通信:实现页面间的数据传递与交互(1)
带你读《现代Javascript高级教程》——前端跨页面通信:实现页面间的数据传递与交互
204 0
|
小程序
微信小程序 - 父组件绑定子组件外传事件通信
微信小程序 - 父组件绑定子组件外传事件通信
126 0