瀏覽器不同窗口之間共享數據/通信
常用的主要有如下方式:
- postMessage
- WebSoket
- localStorage、sessionStorage
- BroadcastChannel
1. postMessage
在A窗口通過window.open打開B窗口, 該方法返回一個B窗口的window對象, 通過調用postMessage方法, 發送A窗口中的數據
B窗口通過監聽window對象的message事件, 通過e.data來獲取A窗口發送過來的數據
另外: postMessage是沒有跨域限制的
A頁面
<body>
<h2>這是index01</h2>
<button class="btnOpen">打開另一個窗口</button>
<button class="btnPost">發送數據</button>
<script>
const btnOpen = document.querySelector('.btnOpen');
const btnPost = document.querySelector('.btnPost');
let index02;
btnOpen.addEventListener('click', () => {
index02 = window.open('./idnex02.html')
})
btnPost.addEventListener('click', () => {
index02.postMessage({ type: 'popring', message: '來自 index01 的數據' }, '/')
})
</script>
</body>
B頁面
<body>
<h2>這是index02</h2>
<h4 class="text"></h4>
<script>
const text = document.querySelector('.text')
window.addEventListener("message", e => {
if (e.data.message) {
text.innerHTML = e.data.message
}
})
</script>
</body>
2. WebSoket
不做演示
3. localStorage、sessionStorage
localStorage不做演示
關於sessionStorage, sessionStorage是會話級別的存儲, 且不支持跨標簽頁共享數據, 但是在相同瀏覽器下,並且是同源窗口下,通過跳轉的頁面可以共享sessionStorage的值
A頁面
<body>
<a href="./index02.html">跳轉到index02</a>
<script>
sessionStorage.setItem('data', '這是存儲在sessionStorage中的數據')
</script>
</body>
B頁面
<body>
<h2>index02</h2>
<h3 class="text"></h3>
<script>
const data = sessionStorage.getItem('data')
const text = document.querySelector('.text')
text.innerHTML = data
</script>
</body>
4. BroadcastChannel
A頁面
<body>
<h2>index01</h2>
<script>
// communicate為廣播的頻道, 發布者和接受者必須處於同一頻道
const bc = new BroadcastChannel('communicate')
bc.postMessage('這是來自 index01 的數據')
</script>
</body>
B頁面
<body>
<h2>index02</h2>
<h3 class="text"></h3>
<script>
const text = document.querySelector('.text')
const bc = new BroadcastChannel('communicate')
bc.onmessage = e => {
text.innerHTML = e.data
}
bc.onmessage()
</script>
</body>
