Ich m?chte auf einer Seite auf die Schaltfl?che klicken und dann den Text im p-Element einer anderen Seite anzeigen. Wie kann ich Erfolg haben?
根據(jù)你的描述,應(yīng)該是兩個(gè)同域(相同的協(xié)議、主機(jī)名、端口)的網(wǎng)頁(yè)進(jìn)行通訊,這樣的話就可以通過(guò) h5 的 localStorage 來(lái)實(shí)現(xiàn)。不需要通過(guò)服務(wù)端。
1、當(dāng) a 頁(yè)面的按鈕點(diǎn)擊之后,設(shè)定一對(duì)新的 localStorage 值。
$("#in").click(function(){
localStorage.setItem("setText","hello")
})
2、在 b 頁(yè)面監(jiān)聽(tīng) window 的 storage 事件。當(dāng)這個(gè)事件被觸發(fā),說(shuō)明存儲(chǔ)數(shù)據(jù)變化了,通過(guò) event 事件對(duì)象的 key 屬性判斷變化的鍵值,如果是我們?cè)O(shè)定的 setText,就可以給 $("#out") 設(shè)置內(nèi)容了。
window.addEventListener("storage",function(e){
if(e.key=="setText"){
var text=localStorage.getItem("setText")
$("#out").text(text);
}
});
因?yàn)?b 頁(yè)面監(jiān)聽(tīng)的是 storage 事件,刷新頁(yè)面之后,如果 a 頁(yè)面點(diǎn)擊時(shí)候設(shè)置的 setText 值還是原來(lái)的值的話,這個(gè)事件就不會(huì)被觸發(fā)。要想讓 b 頁(yè)面刷新后的這個(gè)元素仍然顯示剛剛設(shè)置的值,還應(yīng)該在 b 頁(yè)面添加一個(gè)判斷:
if(localStorage.getItem("text")){
h.innerText=localStorage.getItem("text")
}
有什么問(wèn)題的話,希望可以探討一下。
如果是iframe的話,使用postMessage
如果是兩個(gè)單獨(dú)網(wǎng)頁(yè)的話,要在服務(wù)端做一個(gè)轉(zhuǎn)發(fā),A頁(yè)面發(fā)送數(shù)據(jù),服務(wù)器存入數(shù)據(jù)庫(kù),B頁(yè)面做一個(gè)輪詢,查詢數(shù)據(jù)是否有變化,有變化則更新數(shù)據(jù)