iframe實(shí)現(xiàn)父子頁面之間互相通信

安裝 npm install xctc-utils@latest

引入 import useUtils from "xctc-utils"

父頁面業(yè)務(wù)

父頁面發(fā)送數(shù)據(jù)到子頁面
/**
 * 父頁面 發(fā)送數(shù)據(jù)到 子頁面Iframe
 * @param id iframe元素的id屬性值
 * @param data  主頁面 發(fā)送到子頁面的數(shù)據(jù)
 * @param url 子頁面的訪問地址,如果沒有調(diào)用 initParentDataToIframe 函數(shù),則需要傳入該參數(shù)
 * @param duration 父頁面向子頁面?zhèn)鬏敂?shù)據(jù)時(shí)蒂萎,如果和initParentDataToIframe函數(shù)同時(shí)調(diào)用棍现,則需要加入定時(shí)器傳遞參數(shù),子頁面才能獲取到數(shù)據(jù)
 * @returns 
 */
useUtils.iframe.parentSendIframeData( id:string,data:any,url?:string,duration?:number )
父級(jí)頁面獲取到子頁面發(fā)送的數(shù)據(jù)
cb回調(diào)函數(shù)横缔,返回子頁面?zhèn)鬟f的數(shù)據(jù)
useUtils.iframe.updateIframeToParentData( cb)

子頁面業(yè)務(wù)

子頁面獲取到 父頁面 傳遞的數(shù)據(jù)
cb回調(diào)函數(shù)铺遂,返回父頁面?zhèn)鬟f的數(shù)據(jù)
useUtils.iframe.updateParentToIframeData(cb)
子頁面 發(fā)送數(shù)據(jù)到 父頁面
/**
 * 子頁面frame 發(fā)送數(shù)據(jù) 到父頁面
 * @param data 發(fā)送的數(shù)據(jù)
 * @param url 父頁面地址
 * @returns 
 */
useUtils.iframe.iframeSendToParentData(data:any,url:string)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市茎刚,隨后出現(xiàn)的幾起案子襟锐,更是在濱河造成了極大的恐慌,老刑警劉巖膛锭,帶你破解...
    沈念sama閱讀 212,383評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件粮坞,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡初狰,警方通過查閱死者的電腦和手機(jī)捞蚂,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,522評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來跷究,“玉大人姓迅,你說我怎么就攤上這事】÷恚” “怎么了丁存?”我有些...
    開封第一講書人閱讀 157,852評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長柴我。 經(jīng)常有香客問我解寝,道長,這世上最難降的妖魔是什么艘儒? 我笑而不...
    開封第一講書人閱讀 56,621評(píng)論 1 284
  • 正文 為了忘掉前任聋伦,我火速辦了婚禮,結(jié)果婚禮上界睁,老公的妹妹穿的比我還像新娘觉增。我一直安慰自己,他們只是感情好翻斟,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,741評(píng)論 6 386
  • 文/花漫 我一把揭開白布逾礁。 她就那樣靜靜地躺著,像睡著了一般访惜。 火紅的嫁衣襯著肌膚如雪嘹履。 梳的紋絲不亂的頭發(fā)上腻扇,一...
    開封第一講書人閱讀 49,929評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音砾嫉,去河邊找鬼幼苛。 笑死,一個(gè)胖子當(dāng)著我的面吹牛焕刮,可吹牛的內(nèi)容都是我干的蚓峦。 我是一名探鬼主播,決...
    沈念sama閱讀 39,076評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼济锄,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼暑椰!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起荐绝,我...
    開封第一講書人閱讀 37,803評(píng)論 0 268
  • 序言:老撾萬榮一對(duì)情侶失蹤一汽,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后低滩,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體召夹,經(jīng)...
    沈念sama閱讀 44,265評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,582評(píng)論 2 327
  • 正文 我和宋清朗相戀三年恕沫,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了监憎。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,716評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡婶溯,死狀恐怖鲸阔,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情迄委,我是刑警寧澤褐筛,帶...
    沈念sama閱讀 34,395評(píng)論 4 333
  • 正文 年R本政府宣布,位于F島的核電站叙身,受9級(jí)特大地震影響渔扎,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜信轿,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,039評(píng)論 3 316
  • 文/蒙蒙 一晃痴、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧财忽,春花似錦、人聲如沸定罢。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽惠况。三九已至,卻和暖如春稠屠,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背权埠。 一陣腳步聲響...
    開封第一講書人閱讀 32,027評(píng)論 1 266
  • 我被黑心中介騙來泰國打工攘蔽, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人满俗。 一個(gè)月前我還...
    沈念sama閱讀 46,488評(píng)論 2 361
  • 正文 我出身青樓,卻偏偏與公主長得像五芝,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子枢步,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,612評(píng)論 2 350

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

  • 最近因?yàn)楣镜暮笈_(tái)系統(tǒng)業(yè)務(wù)過于龐大价捧,故將前端按業(yè)務(wù)模塊拆分成幾個(gè)項(xiàng)目通過iframe標(biāo)簽來集成涡戳,由此引發(fā)一系列的通...
    XZ陽光小熊閱讀 1,205評(píng)論 0 0
  • iframe子頁面與父頁面通信根據(jù)iframe中src屬性是同域鏈接還是跨域鏈接,通信方式也不同嵌屎。 一、同域下父子...
    Yi_9565閱讀 499評(píng)論 0 3
  • 作為一個(gè)沒有什么情懷和追求的前端工程師, 是么有怎么考慮過 iframe 用法的, (畢竟從學(xué)習(xí)到工作自己扮演的一...
    碼農(nóng)小圈圈閱讀 7,121評(píng)論 0 4
  • 標(biāo)簽一、作用:可以將一個(gè)網(wǎng)頁頁面通過iframe嵌入到另一個(gè)網(wǎng)頁頁面中;二淤堵、基礎(chǔ)屬性:width: 規(guī)定 的寬度;...
    一撮小火花閱讀 4,714評(píng)論 0 0
  • 平時(shí)工作中有時(shí)會(huì)遇到頁面嵌套的情況慰毅,一般是用iframe解決扎阶。那么,兩個(gè)頁面如何通信呢着饥?下面分兩種情況進(jìn)行: 一、...
    麥西的西閱讀 8,740評(píng)論 0 20