Question

可能重复：
Making Browser Back button work while using AJAX requests

我想写一些jQuery，当浏览器网址更改（不刷新）时，它会执行操作。

我会100％知道网址是什么，所以他们会

www.hello.com/#one
www.hello.com/#two
www.hello.com/#three

我不太关心这个动作（我可以对此进行排序）;它更多的是关于在未刷新时检测到URL已更改。

任何指针？

我不想使用插件，因为我觉得它们对我需要的东西有点过分，因为我知道我想要实现的具体内容。

Answer 1

查看我的一个项目（http://yankele.co.il）

中的以下代码

$(document).ready(function() {

   //Declare some variables...
   var $mainContent = $('.main-content'),
       contentHeight = $mainContent.height(),
       siteURL = 'http://' + top.location.host.toString(),
       hash = window.location.hash,
       $internalLinks = $('a[href^=' + siteURL + ']'),
       $ajaxSpinner = $('#spinner'),
       URL = '',
       $el;
       console.log(contentHeight);

   $mainContent.height(contentHeight);    
   $internalLinks.each(function() {

      $el = $(this);
      $el.attr('href', '#' + this.pathname);

   }).click(function() {

      $ajaxSpinner.fadeIn();
      $mainContent.animate({opacity: '0.1'});
      $('.current_page_item').removeClass('current_page_item');
      $el = $(this);
      URL = $el.attr('href').substring(1);
      URL += ' #inside';
      $mainContent.load(URL, function() {
         marquee();
         $ajaxSpinner.fadeOut();
         $mainContent.animate({opacity: '1'});
         $el.parent().addClass('current_page_item');
         contentHeight = parseInt($mainContent.css('paddingTop')) + parseInt($mainContent.css('paddingBottom')) + $('#inside').height();
         $mainContent.animate({height: contentHeight});
      });

   });

   if (hash != '' && hash != '#/') {

      $ajaxSpinner.fadeIn();
      $mainContent.animate({opacity: '0.1'});
      $('.current_page_item').removeClass('current_page_item');
      URL = hash.substring(1);
      URL += ' #inside';
      $('a[href="'+window.location.hash+'"]').addClass('current_link').parent().addClass('current_page_item');
      $mainContent.load(URL, function() {
         marquee();
         $ajaxSpinner.fadeOut();
         $mainContent.animate({opacity: '1'});
         contentHeight = parseInt($mainContent.css('paddingTop')) + parseInt($mainContent.css('paddingBottom')) + $('#inside').height();
         $mainContent.animate({height: contentHeight});         
      });

   }

});

它已经过时了，但它有效，它的作用是，当点击主要内容区域中的任何链接时，主要内容将淡出白色，将出现一个AJAX微调器，页面将加载AJAX上的链接到页。它在刷新时也有效。

浏览器后退按钮/ #one #two等

1 个答案: