最近在公司開(kāi)發(fā)中遇到移動(dòng)端官網(wǎng)首頁(yè)用iframe嵌套登錄頁(yè)窒舟，想要在點(diǎn)擊獲取驗(yàn)證碼的時(shí)候整個(gè)頁(yè)面會(huì)有模態(tài)框彈出盈电，但是實(shí)際彈出的模態(tài)框只能在iframe里面全覆蓋只祠，沒(méi)有辦法彈出覆蓋到外面侍瑟，下面寫(xiě)了簡(jiǎn)單小demo效果：
下面點(diǎn)擊驗(yàn)證碼彈出的是的iframe嵌套的大小姐赡，沒(méi)有能將下面灰色整個(gè)父盒子的區(qū)域遮住
之前用了一個(gè)方法在iframe嵌套的那個(gè)頁(yè)面動(dòng)態(tài)給父級(jí)創(chuàng)建一個(gè)模態(tài)框莱预，然后再動(dòng)態(tài)給移除，現(xiàn)在公司兩個(gè)網(wǎng)址的協(xié)議改了以后项滑，現(xiàn)在不行了依沮，報(bào)錯(cuò)提示存在跨域
注意：下面是為了方便講解我自己瞎編的兩個(gè)網(wǎng)站的網(wǎng)址：
a網(wǎng)頁(yè)：http://a.com.cn (這個(gè)a網(wǎng)頁(yè)是需要嵌套b網(wǎng)頁(yè)的頁(yè)面)
b網(wǎng)頁(yè)：https://b.com.cn （這個(gè)b網(wǎng)頁(yè)是登錄頁(yè)面）
a網(wǎng)頁(yè)(http://a.com.cn)：
<div class="box">
<iframe id="ifr" class="box2" src="https://a.com.cn" width="" height=""></iframe>
</div>
這個(gè)時(shí)候a網(wǎng)頁(yè)js里面寫(xiě)入,下面做了一個(gè)sit測(cè)試環(huán)境判斷
window.onload = function (){
//父盒子創(chuàng)建模態(tài)框
var _div=document.createElement('div');
_div.style='position: fixed;top: 0px;left: 0px;width: 100%;height: 100%;z-index: 0;background-color: rgba(0, 0, 0, 0.7);';
window.addEventListener('message',function (e){
message的時(shí)間對(duì)象是e ,e有三個(gè)屬性
e.source：發(fā)送消息的窗口
e.origin: 消息發(fā)向的網(wǎng)址
e.data: 消息內(nèi)容
//sit環(huán)境判斷
if(e.origin== "https://b.com.cn" || "https://bsit.com.cn"){
e.data=="1"?document.body.appendChild(_div):document.body.removeChild(_div);
}
},false);
}
b網(wǎng)頁(yè)(https://b.com.cn)：
此處也對(duì)父頁(yè)面的環(huán)境做了判斷，傳過(guò)去的是 "1"枪狂，下面的url就是要傳給的父盒子的網(wǎng)址危喉。父頁(yè)面根據(jù)傳過(guò)來(lái)的1，來(lái)判斷要不要?jiǎng)討B(tài)創(chuàng)建模態(tài)框州疾，剩下的就是給iframe的z-index層級(jí)高于父盒子的模態(tài)框辜限，不然會(huì)被父頁(yè)面的模態(tài)框蓋住，
var msk = function msk() {
var URL = window.location.href;
var url = "";
if (URL.indexOf("sit") > -1) {
url = "http://a.com.cn";
} else {
url = "http://a.com.cn";
}
window.parent.postMessage("1", url);
};
下面就可以實(shí)現(xiàn)了
