父頁(yè)面bootstrap模態(tài)框:
<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>
父頁(yè)面js代碼 :增加message監(jiān)聽(tīng)器
1 2 3 4 5 6 7 8 9 10 11 | function openModal(){
$('iframe').attr("src","http://localhost:8080/test/corsPage.html");
$('#myModal').modal({backdrop:false});//false：表示單擊模態(tài)框以外區(qū)域不關(guān)閉模態(tài)框
}
window.addEventListener('message', receiveMessage, false);
function receiveMessage(evt) {
var taskData = $.parseJSON(evt.data);
if(taskData.opt=="C"){
$("#myModal").modal("hide");
}
}
|
子頁(yè)面corsPage.html，跨域/單獨(dú)的頁(yè)面(iframe打開(kāi)，跟父頁(yè)面無(wú)關(guān))，
如何關(guān)閉模態(tài)框/傳值給父頁(yè)面， JS代碼:
1 2 | var data_ = {"opt":"C"};//Close/Hide modal
window.parent.postMessage(JSON.stringify(data_), '*');
|