При просмотре через Facebook страниц заголовок и неподвижная секция колонтитула остаются видимыми между загрузками страниц и в URL в адресной строке изменяется соответственно. По крайней мере, это иллюзия, я получаю.
Как добиться того, что Facebook с технической точки зрения?
Один из способов обеспечить верхние и нижние колонтитулы, которые появляются инвариантом с помощью CSS - вот пример фиксированного нижнего колонтитула (обратите внимание на «позицию: фиксированную;»):
#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-Top).
Это не на самом деле остается на странице , но, так как позиционирование настолько плотное и инвариантно, то будет казаться, что он делает , если страница загружается не займет слишком много времени. Я не знаю , если это то , что делает FaceBook , но это даст вам такой же эффект.
Ну, так, чтобы достичь такого, что было бы с помощью AJAX, но, насколько я могу видеть, facebook на самом деле не делает это ... Я только что проверил, и он обновляет заголовок, как и большинство сайтов ...
Изменить: Когда я первый это ответил, что я смотрел на Facebook с Google Chrome (2.0), которые по каким - либо причинам, не на самом деле сделать это таким образом -> при нажатии на Мой профиль на главной странице, он дает мне это в адресной строке: http://www.facebook.com/profile.php?id=1304250071&ref=profile
и, следовательно, обновляет всю страницу ... Странно
Обратитесь к ответу Марка Бриттингем для как стиль его, хотя я не думаю, что это то, что вы спрашиваете здесь. Я дам вам технические подробности о том, как она работает (и почему это довольно блестящий).
Посмотрите на строку состояния при наведении на ссылку профиля в заголовке ...
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, все, что вам нужно сделать, это назначить обработчик события клика эти ссылки, как так ...
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 (через элемент ID) будет прокрутить страницу на всем пути к вершине. Для того, чтобы увидеть , что я говорю: вы прокрутите вниз примерно на 10 пикселей от верхней части Facebook, выставляя половину верхнего меню. Нажмите на один из пунктов, он будет прыгать его обратно до верхней части страницы , как только идентификатор фрагмента обновляется (без любого окна перекрашивать / перерисовывать задержки).
С CSS абсолютной / фиксированное позиционирование, теги DIV, содержащие верхние и нижние колонтитулы могут находиться в любом месте HTML. Как и на вершине!
В большинстве современных браузеров есть задержка рендеринга, одна четверть второго для Firefox я верю, так что страница не будет отображаться частично отображаемое содержимое в быстрых вспышек и тратить много времени на рисование в сети передачи данных приходит.
Так что может случиться, что новая страница быстро возвращает HTML, содержащие стили и верхние и нижние колонтитулы. Это содержание может быть оказана немедленно браузером, поэтому, когда он отображает следующую страницу, по-видимому, как если бы те не изменились.
Если страница создания динамического контента, хороший фокус в том, чтобы поместить всю статическую информацию в верхней части, вывод, что и очистить буфер данных. Затем сделайте динамические запросы к базе данных и такие.
Для того, чтобы увеличить Джош Стодол в ответ: В моем понимании менеджер YUI Закладка делает именно эту работу.