秘密花园—Bootstrap模态框中子父页面的数据默契交流

记录在实现一个模态框弹出功能时,如果内嵌的是一个iframe页面,恰好需要子父及面进行值交互,就会涉及到子父页面传值的问题,解决问题的方案。

问题构建

• 首先我们得先引入一个模态框,并在模态框中镶嵌一个iframe

<!-- 模态框（Modal）-->
<div class="modal fade" id="showHealthModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog" style="width:1000px">
      <div class="modal-content">
         <div class="modal-header" onmousedown="move.mousedown(event,this.parentNode.parentNode);">
            <font id="illTit3" style="font-size: 18px;font-family: 'Microsoft YaHei';color: #df707b;">打印健康状态报告</font>
            <button type="button" class="close" aria-hidden="true" onclick="closePrintHeal()">&times;</button>
         </div>
         <div class="modal-body">
            <iframe id="showHealthFrame" style="width:100%;height: 500px;border:none;transform: translate3d(0, 0, 0);" scrolling="auto" src="${ctxPath}/jsp/common/wait.html"></iframe>
         </div>
         <div class="modal-footer noPrint" >
            <button class="btn btn-info printBtn" onclick="printHealDo(2)"><span class="glyphicon glyphicon-download-alt"></span>&nbsp;&nbsp;打印</button>
            <button type="button" class="btn btn-default" onclick="closePrintHeal()">返回</button>
         </div>
      </div><!-- /.modal-content -->
   </div><!-- /.modal -->
</div>

• 此时问题就出现了,首先内嵌的iframe和模态框关联,模态框和当前页面关联,现在模态框打开之后需要在iframe中显示页面上的数据,就会涉及到传值问题,采用什么样的方式更简单便捷,往往是我们跳出技术内耗的第一步!

尝试方案

第一种方式,采用message监听器去完成

请先确认好场景,究竟是子页面传父页面,还是父页面传子页面,网上很多方法都是子传父,不可混淆。

• 因为我们是父页面传送数据到子页面,所以需要在父页面发送数据,子页面监听数据,反之亦然。

 <!-- 父页面发送数据,在弹出模态框的函数中添加如下代码-->
    //根据id获取模态框内嵌iframe
    var showHealthFrame1=  document.getElementById("showHealthFrame")
    //举出要传送的数据
    let test = { msg:"测试"}
    //发送数据到子页面
    showHealthFrame1.onload = function () {           
    showHealthFrame1.contentWindow.postMessage(test,'http://localhost:8080/shoillmac.jsp')
    }

 <!-- 子页面接收数据,添加如下代码-->
    window.addEventListener("message", function (event){
       console.log(event.data)
    });

执行代码,结果如下:

• 需要注意的点: 父页面发送数据需要分清在什么时候发送,必须是在iframe页面加载完成之后再发送,不然就无法被子页面监听到,我就是踩了这个坑,然后用的我下面说的这种方法,但就个人感觉,如果发送message去监听获取,其中的url这种方式可能不是很好,我更推荐大家用下面的方法。

第二种方式,采用全局同域来传送

    //父页面代码
    window.dtp = test; //建立全局变量dtp, 将需要待传送的变量health赋值给全局变量
    
    //子页面代码
    var pmj = window.parent.dtp//获取父页面中的全局变量
    console.log(pmj) //打印结果

总结

      能够看出上面两种方式都可以进行子父页面传值,但是就代码复杂来说,第二种更优,因为触发场景有局限性,严格来说,二者适用场景可以细分,如果是跨域页面只有第一种方式能够符合,第二种只限制在同一域中传送,具体采用哪一种,要根据具体场景来选择。

距离中秋放假还有6天!!!!