在平時(shí)做web開發(fā)的時(shí)候關(guān)于消息傳遞帚呼,除了客戶端與服務(wù)器傳值還會(huì)遇到窗口與窗口之間如何實(shí)現(xiàn)數(shù)據(jù)傳遞的問題雷袋。
以下是在項(xiàng)目的中使用過的幾種方法派哲,如有寫的不準(zhǔn)確的請(qǐng)見諒
方法(1)
html5 postMessage()
· postMessage()方法允許來自不同源的腳本采用異步方式進(jìn)行有限的通信,可以實(shí)現(xiàn)跨文本檔棵里、多窗口粥诫、跨域消息傳遞咒吐。
· postMessage(data,origin)方法接受兩個(gè)參數(shù)
- data:要傳遞的數(shù)據(jù)但荤,由于部分瀏覽器只能處理字符串參數(shù),所以有時(shí)需要使用JSON.stringify()方法對(duì)對(duì)象參數(shù)序列化彼城。
- origin:字符串參數(shù)诅蝶,指明目標(biāo)窗口的源退个,協(xié)議+主機(jī)+端口號(hào)[+URL(忽略)],這個(gè)參數(shù)可以具體設(shè)置成指定窗口(比較安全)调炬,也可以設(shè)置為"*"(表示可以傳遞給任意窗口)语盈,當(dāng)然如果要指定窗口和當(dāng)前窗口同源的話設(shè)置為"/"。********************************************************************************************************
子窗口控制父級(jí)窗口
1缰泡、在父級(jí)窗口
//監(jiān)聽postMessage消息事件
if (typeof window.addEventListener != 'undefined') {??
? ? window.addEventListener('message', onmessage, false);
} else if (typeof window.attachEvent != 'undefined') {??
? ? window.attachEvent('onmessage', onmessage);
}
//消息處理函數(shù)
var onmessage = function(e){
? ? if(e.data=="完成"){?
? ? ? ? ? ?alert(12);
? ? }
}
2刀荒、在子級(jí)窗口
window.frames[0].postMessage('完成','*');
top.postMessage('完成','*');
知識(shí)點(diǎn):在應(yīng)用有frameset或者iframe的頁面時(shí),parent是父窗口棘钞,top是最頂級(jí)父窗口(有的窗口中套了好幾層frameset或者iframe)照棋,self是當(dāng)前窗口, opener是用open方法打開當(dāng)前窗口的那個(gè)窗口武翎。
注:window、self溶锭、window.self是等價(jià)的宝恶。
方法(2)
同域相互訪問
1、在父級(jí)窗口調(diào)用子級(jí)頁面的函數(shù)PIframe()
<iframe src="B.html" name="myframe" width="500" height="100"></iframe>
window.myframe.PIframe();? (在Chrome不起左右)趴捅;
可以試著用
$(ifream-id).contents().find((ID)).click();
2垫毙、在子級(jí)窗口調(diào)用父級(jí)頁面的函數(shù)fMain()
parent.fMain();?
注意:必須開啟服務(wù)