美文网首页
Bootstrap 模态框 + iframe 打开子页面 数据传

Bootstrap 模态框 + iframe 打开子页面 数据传

作者: 大萝卜2022 | 来源:发表于2022-11-27 16:33 被阅读0次

    父页面bootstrap模态框:

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="false" >
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <iframe style="zoom: 0.8;" height="700px" src="" frameBorder="0" width="99.6%"></iframe>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    

    父页面js代码 :增加message监听器:

    function openModal(){
        $('iframe').attr("src","http://localhost:8080/test/corsPage.html");
        $('#myModal').modal({backdrop:false});//false:表示单击模态框以外区域不关闭模态框
    }
    window.addEventListener('message', receiveMessage, false);
    function receiveMessage(evt) {
        var taskData = $.parseJSON(evt.data);
        if(taskData.opt=="C"){
            $("#myModal").modal("hide");
        }
    }
    

    子页面corsPage.html,跨域/单独的页面(iframe打开,跟父页面无关),
    如何关闭模态框/传值给父页面, JS代码:

    var data_ = {"opt":"C"};//Close/Hide modal
    window.parent.postMessage(JSON.stringify(data_), '*');
    

    相关文章

      网友评论

          本文标题:Bootstrap 模态框 + iframe 打开子页面 数据传

          本文链接:https://www.haomeiwen.com/subject/zhhkfdtx.html