HTML5將外部內容加載到div並使用pushState（）？

我有一個主頁「index.html」。這個主頁是通過HTML5完成的網站入口。還有其他網頁的網站：HTML5將外部內容加載到div並使用pushState（）？

「about.html」，「work.html」，「portfolio.html」，「contact.html」

因此，所有這些網頁都被稱爲「contentDiv一個div 「其中有相應的副本/文字。用戶通過「index.html」進入網站，如果用戶點擊以下導航鏈接之一：

關於|工作|投資組合|聯繫人

「index.html」頁面使用JQuery的load（）調用加載點擊頁面的「contentDiv」的內容，然後使用動畫在加載的div中滑動。

網站向後兼容，所以如果JavaScript被禁用，那麼用戶將被帶到點擊頁面，而不是通過「index.html」通過load（）調用加載內容。

順便說一句，在導航鏈接的信息進行編碼這樣的：

<a href="about.html" title='About'>About</a>

一旦「index.html的」加載所請求的內容，通過使用pushState的（），URL被更新。因此，如果用戶點擊「關於」鏈接，然後pushState的（）更新網址：

「http://www.abc.com/about.html」

我之所以沒有插入任何散列成href標籤，因爲我希望網站有一個後備箱，以防止Javascript被禁用。這樣，用戶可以被定向到請求的頁面（'about.html'）而不是「index.html」。

到目前爲止，所有的預期效果都很好，但這裏是問題所在。當用戶在「index.html」上並點擊任何一個部分，例如「about.html」時，內容被加載並且URL通過pushState（）更新。所以現在URL是「http://www.abc.com/about.html」。現在，如果用戶刷新頁面（「index.html」），則會執行「about.html」而不是執行load（）調用的「index.html」。

比方說，如果我的代碼的導航HREF標記是這樣的：

<a href="#about" title="about">About</a>

那麼URL結束有它的哈希值。如果我將鏈接「http://www.abc.com/#about」複製並通過電子郵件發送給用戶，並且用戶試圖通過JavaScript禁用的瀏覽器打開鏈接，則用戶將無法獲得「about .html「，因爲鏈接只有'#about'而不是」about.html「。

我想要做的事情確實可行我只是不知道如何處理它。如果有人能幫助我，那將是美好的。

原諒我，這麼長的描述。

謝謝。

來源

2012-08-17 Combustion007

所以你遇到的問題是刷新？你爲什麼把hashtag放在href裏面？ – ama2 2012-08-17 03:18:38

我最終將所有導航hrefs設置爲「」。然後在document.ready（）函數上設置hrefs值。

$('a[rel=nav]').attr('href', '');

謝謝。

來源

2012-08-26 20:57:51 Combustion007

此代碼將實現您需要做的並且禁用javascript支持用戶。

$('a').click(function() { 
    window.location.hash = $(this).attr('src'); 
    return false; 
}

您的網址就會看起來像http://www.yoursite.com/#about.html如果你點擊有關鏈接上，當你刷新他們的工作。如果你想了解更多關於製作阿賈克斯網站，我建議你訪問這個博客Css-Tricks.com

來源

2012-08-17 03:29:59 FrameDev

HTML5將外部內容加載到div並使用pushState（）？

回答

相關問題