天天看点

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>
           

继续阅读