保存並加載頁面的ajax狀態

我正在研究Wordpress單頁組合中的ajax加載功能。保存並加載頁面的ajax狀態

原理是，當您單擊圖庫中的縮略圖時，它會打開一個容器（#DrawerContainer）並將其中的ajax內容讀取到該容器中。有了很多幫助，我已經能夠打開抽屜並在單擊縮略圖時加載帖子內容。

這是一個小提琴，如果你想看到它的工作（ajax不會加載，但它在本地工作）。 http://jsfiddle.net/RF6df/24/

我現在正在處理的部分：我需要我的網站被抓取，並且網址可以共享。如果我給某人http://mywebsite.com/#!project5，我需要在加載頁面時打開project5內容。
我認爲哈希爆炸（＃！）網址是完成這項工作的方法。通過下面的代碼（在jsfiddle中註釋），我可以更新url並添加單擊縮略圖的散列。

var pathname = $(this).find('a')[0].href.split('/'), 
      l = pathname.length; 
     pathname = pathname[l-1] || pathname[l-2]; 
     window.location.hash = "#!" + pathname;

但是，當我加載一個頁面，阿賈克斯狀態不記得。我認爲這是因爲我的ajax容器只在點擊事件上加載，但在php中添加持久容器時沒有任何變化。

有沒有一種方法來加載頁面的內容已經顯示，或打開#DrawerContainer頁面加載哈希爆炸URL？

請記住，我只是在學習jquery和ajax。所以，如果你解釋或評論一下你做了什麼，我會非常感激，我肯定會同時學習...... :)

來源

2012-11-08 wyem

烯的方法看起來不錯，我對它發表了評論的哈希值。如果您需要進一步的幫助，更新小提琴以更好地反映html結構將極大地幫助 - 例如列表項中沒有鏈接，可以很高興看到它們的href如何（例如'/ foo /'或'/ foo'或'http：// example.com/foo/bar'） –

我只是更新了小提琴（請參閱第一個縮略圖），以便獲得我確切的結構。 '<？php the_permalink（）; ？>'正在返回這個'http：// example.com/foo /'，並且它看起來像這個'http：//example.com/#！foo' – wyem

onload你應該檢查window.location.hash並觸發點擊特定的鏈接/ div。

$(document).ready(function() { 
    var hash = window.location.hash; 
    if (hash.length > 0) { 
     hash = hash.replace('#' , '' , hash); 
     $('a[rel="'+hash+'"]').trigger('click'); 
    } 
});

來源

2012-11-08 15:48:27 Ene

這看起來不錯，但是，替換/刪除'＃！'而不是'＃'並使用'[href $ ='而不是'[rel ='可能會產生更好的結果。 –

我嘗試了兩個代碼，但沒有產生積極影響。但如果我理解得很好，我想我必須朝這個方向挖掘。 – wyem

糾正我，如果我錯了，這個函數應該檢查哪個哈希是在地址欄中，並觸發點擊相應的縮略圖，當頁面加載？是對的嗎？ – wyem

我在我希望通過哈希更改觸發的網站上使用了以下內容。

首先我綁定一個hashchange事件獲得哈希值

$(window).bind('hashchange', function(o){ 

      url = window.location.hash.substring(1); 

      o.preventDefault(); 



     if (!url) { 
      return; 
     } 

}

然後，我觸發，當我想hashchange - 在你的情況下，即在頁面加載的文件準備好。

jQuery(document).ready(function($) { 
    $(window).trigger('hashchange'); 
});

然後，您可以使用您的函數加載正確的內容

來源

2012-11-08 15:59:37

問題是關於打開頁面，沒有點擊鏈接。 – Ene

這就是爲什麼當頁面加載時我觸發hashchange。當文檔準備就緒時，它會觸發hashchange函數，該函數獲取當前的散列值，然後可以用它來加載正確的內容 - 這意味着可以使用相同的函數來單擊鏈接並加載頁面 –

謝謝@KevPrice但你的第一個代碼是讓我的瀏覽器跳轉到另一個頁面，而不是在家中加載內容。 – wyem

保存並加載頁面的ajax狀態

回答

相關問題