iframe父子頁面通訊解決方案

佀無極發表於2018-08-30

有兩點要注意

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>


相關文章