AJAX和setInterval for window.location.hash

Question

//Gather AJAX links 
var ajaxLink = $("#logo, .navLink, .tableLink, .footerLink"); 

//Mark the recent state as null (because there is none yet) 
var recentState = null; 

//Initialize the page state based on the URL (bookmarking compatibility) 
window.onload = function() { 
    //If no page state exists, assume the user is at index.html 
    if (window.location.hash == "") { 
     window.location.hash = "page=index"; 
    } 

    //Load the page state based on the URL 
    loadStateFromURL(); 

    //Keep the page state synchronized (back/forward button compatibility) 
    setInterval(loadStateFromURL, 500); 

    //Exit 
    return; 
} 

//Use AJAX for certain links 
ajaxLink.click(function() { 
    //Update the URL 
    window.location.hash = "page=" + $(this).attr("id"); 

    //Load the page state based on the URL 
    loadStateFromURL(); 

    //Return false or else page will refresh 
    return false; 
}); 

//Load the page state based on the URL 
function loadStateFromURL() { 
    //If nothing has changed, exit 
    if (window.location.hash == recentState) { 
     return; 
    } 

    //Mark the recent state 
    recentState = window.location.hash; 

    //Go through an array of all AJAX links and check their IDs 
    for (var i = 0; i < ajaxLink.length; i++) { 
     //If we find a link's ID that matches the current state, load the relevant content 
     if ("#page=" + ajaxLink[i].id == window.location.hash) { 
      //Load contents into article.main 
      $("article.main").fadeOut(0).load(ajaxLink[i].href, function(response, status, xhr) { 
       //Show an error if the request fails 
       if (status == "error") { 
        $("article.main").load("./404.html"); 
        window.location.hash = "page=404"; 
       } 
      }).fadeIn(500); 

      //Update the page title 
      document.title = "\u2622 My Website Name \u2622 " + ajaxLink[i].text; 
      document.getElementById("headH2").textContent = ajaxLink[i].text; 

      //State has been fixed, exit 
      return; 
     } 
    } 
} 

當我在本地運行它時，此代碼完美地工作！

但是，當我把它放在網絡服務器上時，當我第一次訪問時，我的AJAX鏈接將刷新頁面。但是，如果我使用後退按鈕，然後再次嘗試鏈接（或者我假設頁面已經在瀏覽器緩存中），它將正常工作。

我不能這樣做，因爲當人們第一次訪問我的頁面時，他們點擊的第一個鏈接將無法按預期運行。

我也一直在測試的一件事是我會用麪包屑書籤（example.com/#page=14）爲我自己的網站添加書籤，並查看它是否在我的頁面不在瀏覽器緩存中時更新。同樣，它在我的本地機器上工作，但不在我的Web服務器上。

Answer 1

使用event.preventDefault()

ajaxLink.click(function(e) { 
    e.preventDefault(); 

    //Update the URL 
    window.location.hash = "page=" + $(this).attr("id"); 

    //Load the page state based on the URL 
    loadStateFromURL(); 

    //Return false or else page will refresh 
    return false; 
}); 

Answer 2

的問題也許是，當你申請你的點擊事件，這些鏈接，他們可能不會被加載到DOM。所以可能的解決方案是將ajaxLink.click(function() { ... });部分放入window.load事件或document.ready事件中。既然你已經使用過window.load事件，你可以這樣做。

//Initialize the page state based on the URL (bookmarking compatibility) 
window.onload = function() { 
    //If no page state exists, assume the user is at index.html 
    if (window.location.hash == "") { 
     window.location.hash = "page=index"; 
    } 

    //Load the page state based on the URL 
    loadStateFromURL(); 

    //Keep the page state synchronized (back/forward button compatibility) 
    setInterval(loadStateFromURL, 500); 

    //Use AJAX for certain links 
    ajaxLink.click(function() { 
     //Update the URL 
     window.location.hash = "page=" + $(this).attr("id"); 

     //Load the page state based on the URL 
     loadStateFromURL(); 

     //Return false or else page will refresh 
     return false; 
    }); 

    //Exit 
    return; 
    } 

Answer 3

解決了我自己的問題，不得不連續解析AJAX鏈接，以便隨着DOM的變化保持更新。

首先，我把ajaxLink聲明成一個函數：

//Gather AJAX links 
function parseAjaxLinks() { 
    var ajaxLink = $("#logo, .navLink, .tableLink, .footerLink"); 
    return ajaxLink; 
} 

然後我不得不把ajaxLink點擊事件到一個函數：

//Load the page state from an AJAX link click event 
function loadStateFromClick() { 
    //Update the AJAX links 
    var ajaxLink = parseAjaxLinks(); 

    ajaxLink.click(function() { 
     //Update the URL 
     window.location.hash = "page=" + $(this).attr("id"); 

     //Load the page state based on the URL 
     loadStateFromURL(); 

     //Return false or else page will refresh 
     return false; 
    }); 
} 

然後我在窗口添加了一行。 onload事件來保持我的AJAX點擊事件與DOM同步（這增加了開銷，但是哦）：

//Initialize the page state based on the URL (bookmarking compatibility) 
window.onload = function() { 
    //If no page state exists, assume the user is at index.html 
    if (window.location.hash == "") { 
     window.location.hash = "page=index"; 
     recentState = window.location.hash; 
    } 

    //Load the page state based on the URL 
    loadStateFromURL(); 

    //Keep the page state synchronized (back/forward button compatibility) 
    setInterval(loadStateFromURL, 250); 

    //Keep AJAX links synchronized (with DOM) 
    setInterval(loadStateFromClick, 250); 

    //Exit 
    return; 
} 

如果你有敏銳的眼光，你看到我叫我的新loadStateFromClick功能的新parseAjaxLinks，所以我加了一條線，我loadStateFromURL功能的頂部，守在那裏更新以及鏈接：

//Load the page state based on the URL 
function loadStateFromURL() { 
    //Update the AJAX links 
    var ajaxLink = parseAjaxLinks(); 

... 

我從中學到的東西是依賴於DOM的變量需要不斷更新。當DOM加載時，事情是不可預測的，而且很糟糕。 **飲料啤酒**