Как Facebook фиксирует верхний и нижний колонтитулы при загрузке другой страницы?

При просмотре страниц Facebook заголовок и фиксированный раздел нижнего колонтитула остаются видимыми между загрузками страниц, и соответственно изменяется URL-адрес в адресной строке. По крайней мере, эта иллюзия, которую я получаю.

Как Facebook достигает технически говоря?

ОТВЕТЫ

Ответ 1

Обратитесь к ответу Марка Бриттингема за то, как его стилизовать, хотя я не думаю, что это то, о чем вы просите здесь. Я дам вам технические подробности о том, как это работает (и почему это довольно блестяще).

Взгляните на строку состояния, когда вы наводите ссылку на профиль в заголовке...

http://www.facebook.com/profile.php?id=514287820&ref=profile

Вот где <a> тег указывает на. Теперь посмотрите на адресную строку, когда вы нажмете на нее...

http://www.facebook.com/home.php#/profile.php?id=514287820&ref=profile

Обратите внимание на "#" идентификатор/хэш файла? Это в основном доказывает, что вы не покинули страницу, и предыдущий запрос был сделан с AJAX. Они перехватывают события кликов на этих ссылках и переопределяют функциональность по умолчанию с чем-то своим.

Чтобы это произошло с Javascript, все, что вам нужно сделать, это назначить обработчик события click для этих ссылок, например...

var header = document.getElementById('header');
var headerLinks = header.getElementsByTagName('a');

for(var i = 0, l = headerLinks.length; i < l; i++) {
  headerLinks[i].onclick = function() {
    var href = this.href;

    //Load the AJAX page (this is a whole other topic)
    loadPage(href);  

    //Update the address bar to make it look like you were redirected
    location.hash = '#' + href;

    //Unfocus the link to make it look like you were redirected
    this.blur();

    //Prevent the natural HTTP redirect
    return false;
  }
}

Одним из невероятных преимуществ этого подхода является то, что он позволяет кнопке "Назад" функционировать (с небольшим добавленным обманом), который традиционно был болезненным побочным эффектом хронического использования AJAX. Я не уверен на 100%, что это за хитрость, но я уверен, что она каким-то образом обнаруживает, когда браузер изменяет идентификатор фрагмента (возможно, проверяя его каждые 500 миллисекунд).

Как побочная заметка, изменение хэша на значение, которое невозможно найти в DOM (через идентификатор элемента), прокрутит страницу до конца. Чтобы узнать, о чем я говорю, вы прокручиваете примерно 10 пикселей из верхней части Facebook, выставляя половину верхнего меню. Нажмите на один из элементов, он вернет его обратно в начало страницы, как только будет обновлен идентификатор фрагмента (без какой-либо задержки на перерисовку окна/перерисовки).

Ответ 2

Один из способов предоставления верхних и нижних колонтитулов, которые выглядят инвариантными, - через CSS - вот пример фиксированного нижнего колонтитула (обратите внимание на "position: fixed;" ):

#Footer  { 
  font-size:xx-small; 
  text-align:left; 
  width:100%; 
  bottom:0px; 
  position:fixed; 
  left:0px; 
  background-color: #CCCCCC; 
  border-top: 1px solid #999999; 
  padding:4px; 
  padding-right:20px; 
  color:#666666; 
}

Вам нужно убедиться, что вы добавили некоторое поле Margin-Bottom в свои div-страницы (те, которые заполняют основную часть страницы), чтобы оставить место для фиксированного нижнего колонтитула (то же самое с заголовком с использованием Margin-Top).

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

Ответ 3

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

Изменить: Когда я впервые ответил на это, я смотрел Facebook с помощью Google Chrome (2.0), который по какой-то причине на самом деле не делает этого так: > когда я нажимаю "Мой профиль" на главной странице, он дает мне это в адресной строке: http://www.facebook.com/profile.php?id=1304250071&ref=profile

и, следовательно, обновляет всю страницу... Strange

Ответ 4

С абсолютным/фиксированным позиционированием CSS теги div, содержащие верхние и нижние колонтитулы, могут быть в любом месте HTML. Как наверху!

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

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

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