iframe父子页面通讯解决方案

weixin_34128501

于 2018-08-30 10:35:09 发布

阅读量115

点赞数

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

版权

有两点要注意

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>

weixin_34128501

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe父子页面通讯解决方案

有两点要注意onload加载完成再进行操作子页面延时获取场景是这样的，父级页面嵌套了多个iframe，report_six.html子级页面按需加载数量，且每个子页面渲染不同的数据。父页面for循环加载子页面数量，动态生成id，根据对应的id，传值给对应的子级页面元素，一定要写在onload里面下面是父页面<body> &...
复制链接

扫一扫