Middle
Auf der Seite gibt es einen Player. Es muss so gemacht werden, dass beim Drücken von Stopp in einem Tab die Wiedergabe auch in einem anderen Tab gestoppt wird. Wie würdest du die Kommunikation zwischen den Tabs realisieren?
sobes.tech KI
Antwort von AI
Для организации общения между вкладками в браузере можно использовать несколько подходов:
-
LocalStorage + событие
storage- При нажатии на кнопку "стоп" в одной вкладке записываем в localStorage специальное значение, например,
localStorage.setItem('playerAction', 'stop'). - В других вкладках слушаем событие
window.addEventListener('storage', ...), и при обнаружении изменения ключаplayerActionвыполняем остановку плеера.
- При нажатии на кнопку "стоп" в одной вкладке записываем в localStorage специальное значение, например,
-
Broadcast Channel API
- Создаем канал:
const bc = new BroadcastChannel('player_channel'). - При нажатии "стоп" отправляем сообщение:
bc.postMessage('stop'). - В других вкладках слушаем
bc.onmessageи реагируем на команду.
- Создаем канал:
Broadcast Channel API более современный и удобный способ, но поддерживается не во всех браузерах (хотя в большинстве современных — да).
Пример с LocalStorage:
// В каждой вкладке
window.addEventListener('storage', (event) => {
if (event.key === 'playerAction' && event.newValue === 'stop') {
// Остановить плеер
player.stop();
}
});
// При нажатии стоп
function onStopClick() {
player.stop();
localStorage.setItem('playerAction', 'stop');
}
Таким образом, изменение в localStorage служит сигналом для других вкладок.