首頁猿問如何做到網(wǎng)頁音樂播放器在打開兩個(gè)標(biāo)...

如何做到網(wǎng)頁音樂播放器在打開兩個(gè)標(biāo)簽頁時(shí)第二個(gè)標(biāo)簽頁不播放？

JavaScript

慕桂英546537 2018-08-14 10:10:48

自己在自己的博客footer上添加了一個(gè)網(wǎng)頁播放器。由于自己的博客已經(jīng)AJAX，所以在切換頁面的時(shí)候不會(huì)導(dǎo)致音樂中斷。不過今天發(fā)現(xiàn)了一個(gè)新問題，就是說在已經(jīng)打開了我博客（也就是說音樂已經(jīng)開始播放了）的情況下，再打開一個(gè)新的標(biāo)簽頁，加載完我的博客以后，音樂播放器還是會(huì)播放，也就是說，兩個(gè)標(biāo)簽頁都在播放我博客上的音樂，聽起來會(huì)很亂，需要手動(dòng)去暫停第二個(gè)標(biāo)簽頁的音樂才行。我想做到能夠在打開第二個(gè)標(biāo)簽頁時(shí)不自動(dòng)播放播放器的音樂，就像網(wǎng)易云音樂那樣實(shí)現(xiàn)?？墒窍氩坏皆撚檬裁礃拥姆椒ā@_>ˋ初學(xué)者表示并不會(huì)qwq求大觸解答

查看完整描述

1 回答

白豬掌柜的

TA貢獻(xiàn)1893條經(jīng)驗(yàn) 獲得超10個(gè)贊

原理是用的localstorage。
但這僅僅不夠，還有最重要的一點(diǎn)。我如何知道另外一個(gè)頁面打開之后，這個(gè)頁面立即暫停音樂哪？
我們來試驗(yàn)下：
模擬正常流程，先打開頁面A.html。假定這在播放音樂。。。。

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>page A</title>
    <script>
        window.onload=function () {            window.addEventListener('storage',function () {                console.log(arguments);
            },false);
        }    </script></head><body>正在播放音樂。。。</body></html>

然后，我們?cè)诖蜷_一個(gè)新的頁面，B.html

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>page B</title>
    <script>
        window.onload=function () {
            localStorage.setItem('open','b.html');
        }    </script></head><body>現(xiàn)在是我這個(gè)頁面在播放音樂。。。</body></html>

這個(gè)時(shí)候你就會(huì)發(fā)現(xiàn)，頁面A.html 立即會(huì)打印出來一個(gè)對(duì)象。沒錯(cuò)就像下圖這樣。