Может ли страница отображать другое содержимое, если хэш URL-адреса изменяется?

Как страница может отображать различное содержимое на основе URL-хэша?

Я не говорю о браузере, прокручивающем вниз, чтобы отобразить привязанный раздел, но что-то вроде JavaScript реагирует на этот хэш и загружает различный контент через AJAX.

Это распространено или даже вероятно?

7 ответов

Решение

Ах, да - это становится общим шаблоном для обработки постоянства состояния страницы в URL, когда контент управляется AJAX.

Javascript может получить доступ к этому значению через window.location.hash. Как только это будет сделано, вы можете выполнять любые действия в зависимости от значения этого хэша.

  • Показать / скрыть узлы
  • Делает другие звонки AJAX
  • Изменить заголовки страниц или цвета
  • Обмен изображениями
  • так далее

Действительно, любой эффект DHTML.

Это иногда делается. Youtube использует хэши для ссылки на определенные временные метки в видео.

РЕДАКТИРОВАТЬ: я предполагал, что у вас может быть проблема, когда пользователь поднимается и вручную редактирует хеш в адресной строке, страница не перезагружается и даже javascript не будет знать, что он изменился. Я был неправ. Я попробовал это на Youtube, это работает.

Я только что создал систему, чтобы сделать это несколько недель назад

при входе в браузер вам нужно обнаружить хеш, вот как это сделать

// test all possible places hash could be on different browsers
if(window.location.hash){
   hash = window.location.hash;
} else if (document.location.hash){
   hash = document.location.hash;
} else if (location.hash){
   hash = location.hash;
}

// some browsers start the hash with #, remove it for consistency
if(hash.substring(0,1) == '#'){
    hash = hash.substring(1,hash.length);
}

Затем обработайте значение хеш-переменной, чтобы вызвать изменения страницы, как вам угодно.

например: http://www.example.com/

if(hash = 'pageA'){
  document.getElementById('mainContentDiv').innerHTML = '<p> content for the page displayed when the hash sais pageA</p>';
}

Сэмми - это библиотека javascript, которая делает именно это.

Поскольку JavaScript имеет доступ к URL-строке, он, конечно, может по-разному влиять на содержимое URL.

Иногда я видел что-то подобное, но я не думаю, что это хороший способ реагировать, если только не в очень специфических целях.

Я помню, что одним из применений был TiddlyWiki, использующий после-часть хеша для установки настроек для рендеринга страницы и тому подобное.

Среди приложений с интенсивным использованием AJAX (например, Gmail) довольно часто иметь возможность использовать все компоненты AJAXy, в то же время позволяя вам создавать закладки для определенной страницы или связывать кого-то с определенной страницей. Если бы они этого не делали, это было бы плохо для юзабилити. Получить хеш URL довольно просто window.location.hash - таким образом, вы можете использовать оператор типа switch при загрузке страницы для выполнения определенного набора функций Javascript, если присутствует хеш.

Некоторые плагины jQuery, которые достигают этой функциональности: history / remote, history.

Ответ на этот вопрос будет более или менее таким же, как мои ответы на эти вопросы:

Итак, два проекта, которые вы, вероятно, захотите посмотреть, которые объясняют весь процесс хеширования и используют его с ajax:

  • jQuery History (использование хэшей для управления состоянием ваших страниц и привязки к изменениям для обновления вашей страницы).

  • jQuery Ajaxy (расширение ajax для jQuery History, позволяющее создавать полноценные ajax-сайты, оставаясь при этом совершенно незаметным и изящно разлагаемым).

Другие вопросы по тегам