如何利用js在兩個(gè)html窗口間通信
場(chǎng)景:當(dāng)A頁(yè)面打開B頁(yè)面,在B頁(yè)面操作后,A頁(yè)面需要同步變更數(shù)據(jù)時(shí)
A 頁(yè)面 ,http://127.0.0.1:10001/A.html
var domain = 'http://127.0.0.1:10001'; window.open('http://127.0.0.1:10001/B.html'); window.addEventListener('message', function (event) { if (event.origin !== domain) return; console.log('message received: ' + event.data, event); }, false);
B 頁(yè)面 ,http://127.0.0.1:10001/B.html,opener是當(dāng)前窗口的打開者引用
var domain = 'http://127.0.0.1:10001'; window.opener.postMessage("success", domain); window.close();
如果是需要A打開B的同時(shí)向B中發(fā)送數(shù)據(jù)時(shí)
// 發(fā)送數(shù)據(jù)方 var domain = 'http://127.0.0.1:10001'; var myPopup = window.open('http://127.0.0.1:10001/B.html'); myPopup.postMessage('數(shù)據(jù)', domain); // 接收數(shù)據(jù)方 window.addEventListener('message', function(event) { if(event.origin !== 'http://127.0.0.1:10001') return; console.log('message received: ' + event.data,event); },false);
以上就是如何利用js在兩個(gè)html窗口間通信的詳細(xì)內(nèi)容,更多關(guān)于js在兩個(gè)html窗口間通信的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- 詳解JS同源策略和CSRF
- JavaScript同源策略和跨域訪問(wèn)實(shí)例詳解
- JS實(shí)現(xiàn)的ajax和同源策略(實(shí)例講解)
- js同源策略詳解
- JavaScript中EventBus實(shí)現(xiàn)對(duì)象之間通信
- 淺談vue websocket nodeJS 進(jìn)行實(shí)時(shí)通信踩到的坑
- Vue.js組件通信之自定義事件詳解
- SpringBoot實(shí)現(xiàn)jsonp跨域通信的方法示例
- Vue.js子組件向父組件通信的方法實(shí)例代碼詳解
- 在vue中使用SockJS實(shí)現(xiàn)webSocket通信的過(guò)程
- JavaScript 如何實(shí)現(xiàn)同源通信
相關(guān)文章
將json當(dāng)數(shù)據(jù)庫(kù)一樣操作的javascript lib
使用javascript操作JSON的類庫(kù)TAFFY DB,具體介紹了:查詢數(shù)據(jù)、添加數(shù)據(jù)、刪除數(shù)據(jù)、修改數(shù)據(jù)。2013-10-10JS實(shí)現(xiàn)加載和讀取XML文件的方法詳解
這篇文章主要介紹了JS實(shí)現(xiàn)加載和讀取XML文件的方法,結(jié)合實(shí)例形式分析了javascript針對(duì)xml文件的加載與讀取相關(guān)實(shí)現(xiàn)步驟與操作技巧,需要的朋友可以參考下2017-04-04JavaScript Ajax實(shí)現(xiàn)異步通信
這篇文章主要為大家詳細(xì)介紹了JavaScript Ajax實(shí)現(xiàn)異步通信的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12uniapp微信小程序授權(quán)登錄并獲取手機(jī)號(hào)的方法
這篇文章主要給大家介紹了關(guān)于uniapp微信小程序授權(quán)登錄并獲取手機(jī)號(hào)的相關(guān)資料,我們?cè)趗niapp開發(fā)微信小程序的過(guò)程中,經(jīng)常需要在微信端登錄,需要的朋友可以參考下2023-06-06element必填校驗(yàn)輸入空格問(wèn)題修改正則表達(dá)式、請(qǐng)求攔截器實(shí)現(xiàn)所有輸入框去除首尾空格(推薦)
這篇文章主要介紹了element必填校驗(yàn)輸入空格問(wèn)題修改正則表達(dá)式、請(qǐng)求攔截器實(shí)現(xiàn)所有輸入框去除首尾空格,本文通過(guò)圖文實(shí)例代碼相結(jié)合給大家講解的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-02-02