Как Facebook сохраняет фиксированный верхний и нижний колонтитулы при загрузке другой страницы? - PullRequest
15 голосов
/ 21 марта 2009

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

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

Ответы [ 5 ]

39 голосов
/ 21 марта 2009

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

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

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

Вот где указан тег . Теперь посмотрите на адресную строку, когда вы щелкнете по ней ...

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, открывая половину верхнего меню. Нажмите на один из элементов, он переместится обратно вверх страницы, как только будет обновлен идентификатор фрагмента (без любого окна перерисовки / задержки перерисовки).

3 голосов
/ 21 марта 2009

Один из способов обеспечить верхний и нижний колонтитулы, которые выглядят инвариантными, - через 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, но это даст вам тот же эффект.

0 голосов
/ 22 марта 2009

Для увеличения Ответ Джоша Стодолы : В моем понимании YUI Bookmark Manager делает именно эту работу.

0 голосов
/ 21 марта 2009

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

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

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

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

0 голосов
/ 21 марта 2009

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

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

и поэтому обновляет всю страницу ... Странно

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...