一切!
所以,我已经建立了一个基于ajax的网站,从section
中提取新内容。这是我完成这项壮举的代码。
$(document).ready(function(event){
var isAnimating = false,
firstLoad = false;
$(document).on('click', 'a', function(event){
event.preventDefault();
var newPage = $(this).attr('href'),
newTitle = $(document).attr('title');
document.title = newTitle;
if( !isAnimating ) changePage(newPage, true);
firstLoad = true;
});
$(window).bind('popstate', function() {
if(firstLoad) {
var newPageArray = location.pathname.split('/'),
newPage = newPageArray[newPageArray.length - 1];
if( !isAnimating ) changePage(newPage, false);
}
firstLoad = true;
});
function changePage(url, bool) {
isAnimating = true;
$('body').addClass('transition');
$('.loader').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
loadNewContent(url, bool);
$('.loader').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
});
if(!transitionsSupported()) loadNewContent(url, bool);
}
function loadNewContent(url, bool) {
var section = $('<section class="content-wrap"></section>');
section.load(url + ' .content-wrap > *', function(responseText){
document.title = $(responseText).filter("title").text();
$('.wrapper').html(section);
finishLoad();
var delay = ( transitionsSupported() ) ? 1200 : 0;
setTimeout(function(){
$('body').removeClass('transition').addClass('load');
$('.loader').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
isAnimating = false;
$('.loader').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
});
if( !transitionsSupported() ) isAnimating = false;
}, delay);
if(url!=window.location && bool){
window.history.pushState({path: url}, '', url);
}
});
}
window.onkeyup = function(e) {
if (e.keyCode == 27) window.history.back();
}
function transitionsSupported() {
return $('html').hasClass('csstransitions');
}
function finishLoad() {
$('body').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
$(this).delay(5000).queue(function() {
$(this).removeClass('load').dequeue();
});
})
}
});
这就像魅力一样,但我想知道如何让.load()
功能改变页面标题。我遇到的问题是新内容只是从新页面中的section
中提取出来的,所以我不相信它能够找到新页面的title
。有没有人对如何完成这项工作以及完整更改页面标题有任何建议?
感谢。
答案 0 :(得分:1)
尝试:
var title = document.getElementsByTagName("title")[0].innerHTML;
或外部页面,如:
$.ajax({
url: externalURL,
async: true,
success: function(data) {
var matches = data.match(/<title>(.*?)<\/title>/);
alert(matches[0]);
}
});