Какой самый простой способ, чтобы один элемент на веб-странице оставался статичным, а остальные менялись?

Question

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

Надеюсь, это имеет смысл, и спасибо заранее за все ответы.

Answer 1

Давайте разрешим неоднозначность в нашем использовании слова «рамка».Хотя это правда, что тег <frame> будет прекращен в будущих версиях HTML, тег <iframe> будет по-прежнему поддерживаться, и это обеспечивает идеальное решение вашей проблемы.Весь ваш веб-сайт будет состоять из двух основных элементов в теле:

1. Музыкальный проигрыватель и
2. Великолепный большой <iframe> для хранения навигационной части вашего сайта.

Это позволит музыкальному проигрывателю воспроизводиться непрерывно, в то время как вся навигация происходит в отдельном кадре, эффективно сохраняя музыкальный проигрыватель «статичным», а остальная часть страницы динамичной.Лучше всего, когда браузеры начнут поддерживать HTML 5, вы сможете использовать новый атрибут seamless, чтобы помочь интегрировать фрейм в внешний вид вашей страницы.До этого вам нужно будет вручную удалить границы и полосы прокрутки, чтобы обеспечить согласованность во всех браузерах.Вы можете достичь этого с помощью следующего:

<iframe src="navigable_page.html"
             frameborder="0" 
             scrolling="no" 
             marginwidth="0" 
             marginheight="0" 
             vspace="0" 
             hspace="0">
</iframe>

Не забудьте установить высоту с помощью CSS.При таком подходе у вас также есть большая гибкость в макете, и вам не нужно ничего переделывать, если вы этого не хотите.Варианты включают в себя, чтобы фрейм занимал всю веб-страницу, с музыкальным проигрывателем перед всем остальным, перетаскиваемым, изменяемым размером и т. Д. Веб-дизайнеры задались бы вопросом, как вы создали музыкальный проигрыватель, независимый от остального изменяющегося контента.Вы также можете иметь таблицу, которая занимает всю страницу, с двумя строками.В верхнем ряду может быть музыкальный проигрыватель, а в нижнем - рамка с высотой, установленной на 100%.Используйте кадры, как в iframes, и вы не будете разочарованы.

Answer 2

Вам придется использовать javascript для загрузки каждого раздела по запросу пользователя, если вы не хотите использовать фрейм. Используйте что-то вроде библиотеки jQuery, чтобы упростить себе задачу, вы можете настроить ее так, чтобы все запросы обновляли определенные содержащие DIV файлы в зависимости от того, что было нажато.

Answer 3

«Горячая» идея сегодняшнего дня - заставить все стать AJAX.Вся навигация и прочее.Технически он считается плохим, но используется для использования, которое вы описываете на некоторых крупных сайтах, а именно Facebook (для чата, очень похожего на ваш случай) и Twitter (для заголовка и обновлений).

Вы быприсвойте каждой странице URL-адрес, такой как mysite.com/#some-folder/some-page/someQueryKey/someValue

Обратите внимание, что это "# /", поскольку все страницы будут только вызовами ajax на одной и той же странице.

Так как это одна и та же страница, вы можете оставить часть, которую вы хотите изменить, при выполнении ваших AJAX-передач

Для получения технических подробностей о том, как реализовать это, ищите материал о реализации AJAX-хеширования (это то, что называется официальным форматом, который Google может индексировать, так называется, и URL-адреса обычно восклицательный знак после хеш-знака "#! /".

Хотя это не самый простой для реализации и означает редизайнвсего сайта, поэтому вы можете рассмотреть другие варианты:

1. Всплывающие окна: они еще не на 100% мертвы и "могут" подойти для вашей ситуации.
2. Перезагрузка: может быть, просто кратковременно сохраняйте в каком-либо cookie-файле (используя JS) нужные вам данные и проверяйте их при загрузке страницы, чтобы возобновить с того места, где вы закончили, хотя пользователь между ними получит небольшую остановку.следовательно, это может быть не для музыкального проигрывателя.

Для пользовательского интерфейса самого виджета, если вам нужно, чтобы он находился в определенном месте на странице независимо от прокрутки или чего-либо (всегда видимого)Вы можете использовать CSS позиционирование :

.music-player
{
    position:fixed;
    bottom:5px;
    right:5px;
}