iframe父子页面通讯解决方案-优快云博客

博客介绍了iframe父子页面数据传递的两个注意点。父级页面嵌套多个iframe，按需加载子页面并渲染不同数据，父页面需在onload里根据动态生成的id传值给子页面元素；子页面用定时器确定接收参数成功后，清除定时器执行业务代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有两点要注意

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>