javascript - js 有什麼優雅的辦法實現在同時打開的兩個標籤頁間相互通信?
黄舟
黄舟 2017-05-16 13:39:46
0
4
688

舉了例子:

我同時打開了a和b兩個頁面,我聚焦在a上,並進行一些操作,讓a頁面上的js處理我的操作並將資料發送到旁邊的b頁面。此時b頁面就能在不刷新、不經過伺服器的情況下接收這些資料並作出回饋。類似於在百度音樂pc網頁版聽歌的時候,如果已經打開了百度音樂盒頁面和列表頁,我在列表頁點一首歌曲的“播放”按鈕時,旁邊的音樂盒頁面就可以自動開始播放那首音樂,而不需要開啟新頁面。

總覺得用cookie什麼的幹這事有些雞肋。

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回覆(4)
阿神

這是一道阿里的面試題,方法很多。利用localstorage的storage事件可以通訊;shadredworker也可以解決;還有就是用websocket。

仅有的幸福

如果你能控制ab的頁面甚至決定URL: sharedworker / localstorage / sessionstorage 都可以用

世界只因有你
<ul>
<li><a href="/song-1" target="player">song-1</a></li>
<li><a href="/song-2" target="player">song-2</a></li>
<li><a href="/song-3" target="player">song-3</a></li>
</ul>

屬性target="framename"表示在指定的框架(頁面)中開啟連結.
可以實現:
點擊新增商品到購物車時,如果購物車頁面已經開啟,則只刷新該頁面,而不是開啟新的購物車頁面.
點擊播放歌曲時,如果播放器頁面已經打開,則只刷新該頁面,而不是打開新的播放器頁面.

世界只因有你

提示下思路:
瀏覽器同時打開兩個同網域的網頁,他們的localStorage是共享的,不仅如此,他们之间的localStorage值改变也是可以监听的。同域的a和b两个页面,a页面发生localStorage.set('abc', 123),b頁可以透過以下方式監聽變化:

window.addEventListener("storage", function(e){  
  console.log('key:', e.key); // "abc"
  console.log('oldValue:', e.oldValue); // null
  console.log('newValue:', e.newValue); // 123
});
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板