Как сделать фиксированные (статические) элементы HTML на каждой странице сайта

Question

Как сделать статический фиксированный HTML-элемент на каждой странице сайта?

Я имею в виду - например, это музыкальный проигрыватель на месте. Отображается в углу страницы, а при навигации по сайту - не перезагружается.

Также, если вы открываете много страниц сайта (разные вкладки), то состояние этого элемента одинаково на всех страницах. (Если я что-то изменю в этом элементе на одной странице - он будет изменен на каждой странице).

Для реального примера я могу предоставить ссылку (я думаю, это разрешено делать на этом сайте): http://www.jamendo.com/en/album/40689

Если вы нажмете «Play» - музыкальный проигрыватель откроется. Если вы откроете другого исполнителя в другом окне - два игрока будут одинаковыми. Если вы изменили громкость в одном окне - громкость изменилась и в другом.

Какие техники здесь используются? Можете ли вы дать некоторые ссылки, чтобы прочитать о таких технологиях?

Answer 1

Вы можете использовать локальное хранилище для хранения текущих настроек и опроса их из каждого открытого экземпляра. Вам не нужно использовать AJAX или сервер, если вы заботитесь только о синхронизации настроек на одном компьютере.

Answer 2

Надеюсь, сайт работает так же, как и когда вы разместили ссылку ...

Этот сайт использует Flash, который использует LocalConnection и ExternalInterface . Flash-объект во всплывающем окне - это тот, который воспроизводит музыку. Элементы управления на странице вызывают объект Flash на странице, который просто отправляет команды всплывающему окну.

Answer 3

Ну, я могу дать вам общее представление о том, как я это сделаю.

Вам необходимо сохранить данные функции, которая не должна быть одинаковой на всех страницах.

Например: если вы хотите, чтобы что-то было в одной и той же позиции на всех страницах, вы можете сохранить текущую позицию этой переменной в переменной сеанса, файле cookie или базе данных для этого конкретного пользователя / IP-адреса. Затем вы будете делать запросы GET к серверу, «запрашивая» самую последнюю позицию из того, что вы отслеживаете. И если это отличается, обновите позицию соответственно.

Вам потребуется использовать Javascript, язык программирования и некоторую устойчивость данных.

Если вы хотите прочитать о новейших материалах, вы можете легко сделать это с помощью node.JS. Существует библиотека, которая позволяет очень легко отражать изменения на стороне сервера на клиенте без выполнения запросов GET (что делает его полезным для приложений чата).