弹框是iframe传值给父元素

标签（空格分隔）： js

如果一个弹框里面嵌入一个iframe,这样就免不了弹框和父元素的交互，

1）父页面html

<div class="modal fade" id="searchModel" role="dialog" aria-labelledby="mySmallModalLabel"  aria-hidden="true">
    <div class="modal-dialog">
        <iframe class="iframe" id="dialogFrame" src="./search.html" style="border-width:0;" scrolling="no">
        </iframe>
    </div>
</div>

2）子页面html

<div class="modal-content">
    <div class="modal-header">
            <button type="button" class="close closeBtn" data-dismiss="advanceCaseSearch">
                <span aria-hidden="true">&times;</span>
                <span class="sr-only">Close</span>
            </button>
            <h5 class="modal-title">搜索</h5>
    </div>
    <div class="modal-body">
        弹出的内容-----
    </div>
    <div class="modal-footer">
        <button type="button" id="btn">确定</button>
        <button type="button" data-dismiss="modal">取消</button>
    </div>
</div>

3-1）子页面的js向父页面的js发送消息
例如发送关闭消息以及当前的数据

$("#btn").click(function () {
   var postInfo = {
        "type": "close",
        "info": curInfo
    };
    window.parent.postMessage(postInfo, '*');
})

3-2)父页面接收子页面的消息进行关闭

window.addEventListener('message', function (e) {
    var dataInfo = e.data;
    switch (dataInfo.type) {
        case "close":
            console.log("关闭窗口-==")
            $('#searchModel').modal('hide');
            if (dataInfo.info !== undefined) {
                console.log("dataInfo============", dataInfo.info)
            }
            break;
        default:
            break;
    }
});

4-1)父页面向子页面发送消息

    var data = {type: 'resultData', data: resultData.data};
   $("#dialogFrame")[0].contentWindow.postMessage(data, '*');

4-2)子页面接收消息

window.addEventListener('message', function (e) {
})