PostMessage函數(shù)實(shí)現(xiàn)iframe嵌套頁(yè)面的數(shù)據(jù)傳遞

最近在公司開(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ū)域遮住


image.png

之前用了一個(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)了

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末严蓖,一起剝皮案震驚了整個(gè)濱河市薄嫡,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌颗胡,老刑警劉巖毫深,帶你破解...
    沈念sama閱讀 211,496評(píng)論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異毒姨,居然都是意外死亡哑蔫,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,187評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén)弧呐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)闸迷,“玉大人,你說(shuō)我怎么就攤上這事俘枫⌒裙粒” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,091評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵崩哩,是天一觀的道長(zhǎng)巡球。 經(jīng)常有香客問(wèn)我言沐,道長(zhǎng),這世上最難降的妖魔是什么酣栈? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,458評(píng)論 1 283
  • 正文 為了忘掉前任险胰,我火速辦了婚禮,結(jié)果婚禮上矿筝,老公的妹妹穿的比我還像新娘起便。我一直安慰自己,他們只是感情好窖维,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,542評(píng)論 6 385
  • 文/花漫 我一把揭開(kāi)白布榆综。 她就那樣靜靜地躺著,像睡著了一般铸史。 火紅的嫁衣襯著肌膚如雪鼻疮。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 49,802評(píng)論 1 290
  • 那天琳轿,我揣著相機(jī)與錄音判沟,去河邊找鬼。 笑死崭篡,一個(gè)胖子當(dāng)著我的面吹牛挪哄,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播琉闪,決...
    沈念sama閱讀 38,945評(píng)論 3 407
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼迹炼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了颠毙?” 一聲冷哼從身側(cè)響起斯入,我...
    開(kāi)封第一講書(shū)人閱讀 37,709評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎蛀蜜,沒(méi)想到半個(gè)月后咱扣,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,158評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡涵防,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,502評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了沪铭。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片壮池。...
    茶點(diǎn)故事閱讀 38,637評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖杀怠,靈堂內(nèi)的尸體忽然破棺而出椰憋,到底是詐尸還是另有隱情,我是刑警寧澤赔退,帶...
    沈念sama閱讀 34,300評(píng)論 4 329
  • 正文 年R本政府宣布橙依,位于F島的核電站证舟,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏窗骑。R本人自食惡果不足惜女责,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,911評(píng)論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望创译。 院中可真熱鬧抵知,春花似錦、人聲如沸软族。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,744評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)立砸。三九已至掖疮,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間颗祝,已是汗流浹背浊闪。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,982評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留吐葵,地道東北人规揪。 一個(gè)月前我還...
    沈念sama閱讀 46,344評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像温峭,于是被迫代替她去往敵國(guó)和親猛铅。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,500評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • 1凤藏、通過(guò)CocoaPods安裝項(xiàng)目名稱(chēng)項(xiàng)目信息 AFNetworking網(wǎng)絡(luò)請(qǐng)求組件 FMDB本地?cái)?shù)據(jù)庫(kù)組件 SD...
    陽(yáng)明先生_X自主閱讀 15,969評(píng)論 3 119
  • 嫁葉黃奸忽,糧滿倉(cāng)。風(fēng)波蕩揖庄,人心涼栗菜。蠻夷把酒,中原癡狂蹄梢。三十功名疙筹,二八彷徨,終究夢(mèng)一場(chǎng)禁炒。 白玉京而咆,微微亮。智者浪幕袱,仁者...
    匹馬觀潮閱讀 216評(píng)論 0 0
  • 關(guān)于忠貞 他前后娶了兩次障癌。 第一次是解放前在老家凌外,她18,他16混弥,洞房揭蓋頭的那一刻才第一次見(jiàn)趴乡,她有點(diǎn)麻臉,但他后...
    叭噠閱讀 1,292評(píng)論 9 5
  • 下午陪孩子去學(xué)古箏蝗拿,與楊爺爺談天晾捏,感覺(jué)很好。 箏如人生哀托,皆在俯仰之間惦辛。 彈箏即俯仰。抬眼看琴譜仓手,俯身彈古箏胖齐。看不準(zhǔn)...
    文武北洋閱讀 477評(píng)論 0 1
  • 山不在高,有仙則名.水不在深,有龍則靈.斯是陋室,惟吾德馨.苔痕上階綠,草色入簾青.談笑有鴻儒,往來(lái)無(wú)白丁.可以調(diào)...
    SuperK軍閱讀 223評(píng)論 0 1