使用.load()获取新页面标题

时间:2016-06-27 05:33:20

标签: jquery ajax

一切!

所以,我已经建立了一个基于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。有没有人对如何完成这项工作以及完整更改页面标题有任何建议?

感谢。

1 个答案:

答案 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]);
  }   
});