Не требуется иметь разметку HTML5, чтобы использовать API истории в браузере, даже если это функция HTML5.
Одна очень быстрая и простая реализация загрузки всех переходов страниц с помощью AJAX:
- Подключить все ссылки, кроме rel = "external", к функции "ChangePage"
- Когда запускается ChangePage, проверьте, поддерживается ли API истории в браузере.
- Если API истории не поддерживается, добавьте хештег или сделайте загрузку обычной полной страницы в качестве запасного варианта.
- Если поддерживается API истории:
- Предотвращение нормального поведения ссылки.
- Вставьте новый URL в историю браузера.
- Сделайте AJAX-запрос на новый URL и извлеките его содержимое.
- Найдите ваш div содержимого (или аналогичный элемент) в ответе, извлеките из него HTML-код и замените HTML-код соответствующего элемента на текущей странице новым.
Это будет легко реализовать, легко управлять кэшами и хорошо работать с роботами Google, недостатком является то, что это не так уж «оптимизировано», и это потребует некоторых дополнительных затрат (по сравнению с более сложным решением) когда вы меняете страницы.
Также будет иметь обратную совместимость, поэтому старые браузеры или «не посетители JavaScript» просто получат обычную загрузку страницы.
Интересные ссылки по теме
Edit:
Еще одна вещь, о которой стоит упомянуть, это то, что вы не должны использовать это вместе с приложениями ASP .Net Web Forms, вероятно, испортит обработку обратной передачи.
Добавление кода:
Я собрал небольшую демонстрацию этой функции, которую вы можете найти здесь .
Он просто использует HTML, Javascript (jQuery) и чуть-чуть CSS, я бы порекомендовал вам проверить его перед использованием. Но я проверил это в Chrome, и, похоже, он работает прилично.
Некоторые тесты, которые я бы порекомендовал:
- Тест в хороших браузерах Chrome и Firefox.
- Протестируйте его в устаревшем браузере, таком как IE7
- Протестируйте его без Javascript (просто установите Noscript или аналог Chrome / Firefox)
Вот javascript, который я использовал для достижения этого, вы можете найти полный исходный код в демонстрационной версии выше.
/*
The arguments are:
url: The url to pull new content from
doPushState: If a new state should be pushed to the browser, true on links and false on normal state changes such as forward and back.
*/
function changePage(url, doPushState, defaultEvent)
{
if (!history.pushState) { //Compatability check
return true; //pushState isn't supported, fallback to normal page load
}
if (defaultEvent != null) {
defaultEvent.preventDefault(); //Someone passed in a default event, stop it from executing
}
if (doPushState) { //If we are supposed to push the state or not
var stateObj = { type: "custom" };
history.pushState(stateObj, "Title", url); //Push the new state to the browser
}
//Make a GET request to the url which was passed in
$.get(url, function(response) {
var newContent = $(response).find(".content"); //Find the content section of the response
var contentWrapper = $("#content-wrapper"); //Find the content-wrapper where we are supposed to change the content.
var oldContent = contentWrapper.find(".content"); //Find the old content which we should replace.
oldContent.fadeOut(300, function() { //Make a pretty fade out of the old content
oldContent.remove(); //Remove it once it is done
contentWrapper.append(newContent.hide()); //Add our new content, hidden
newContent.fadeIn(300); //Fade it in!
});
});
}
//We hook up our events in here
$(function() {
$(".generated").html(new Date().getTime()); //This is just to present that it's actually working.
//Bind all links to use our changePage function except rel="external"
$("a[rel!='external']").live("click", function (e) {
changePage($(this).attr("href"), true, e);
});
//Bind "popstate", it is the browsers back and forward
window.onpopstate = function (e) {
if (e.state != null) {
changePage(document.location, false, null);
}
}
});