onHashChange運行onLoad ... awkward

所以我想我的頁面加載內容，如果窗口的散列已更改。onHashChange運行onLoad ... awkward

使用Mootools的，這是很簡單的：

$extend(Element.NativeEvents, { 
    hashchange: 1 
});

然後：

window.addEvent('hashchange', function() {});

然而，當被加載頁面的hashchange事件被解僱，即使規範要求它不發射，直到頁面加載完成！

除非我第一次加載頁面，沒有散列，那麼所有的預期工作。

我認爲這裏的問題是，瀏覽器認爲頁面加載「完成」，然後運行JavaScript的其餘部分，其中包括散列檢測加載必要的頁面。

例如，如果我在http://foo.bar/中輸入，所有都會正常工作。但是，理想情況下，http://foo.bar/#test會加載初始頁面，檢測散列並加載「測試」內容。

不幸的是，瀏覽器加載了初始頁面，認爲它是「已準備就緒」，然後加載「測試」內容，然後觸發onHashChange。哎呀？

這會導致無限循環，除非我特別要求瀏覽器不要在發生事件時更新哈希值。這很容易：

var noHashChange; 
noHashChange = true; 
var hashes = window.location.hash.substr(1).split("/"); // Deciphers the hash, in this case, hashes[0] is "test" 
selectContent(hashes[0]); // Here, selectContent would read noHashChange, and wouldn't update the hash 
noHashChange = false;

所以，現在，更新已加載頁面後的哈希將正常工作。除了在初始頁面加載時仍然堅持，並且獲取內容大約3或4次，因爲它一直在檢測散列已經改變。亂。

我認爲它可能有一些做與我怎樣設置散列，但我想不出更好的辦法，除了這樣做：內部函數的

window.location.hash = foobar;

...那在選擇新內容時運行。

這就是問題所在，是嗎？頁面加載，那麼內容加載（如果有內容）...

我希望我一直連貫......

來源

2010-07-11 Julian H. Lam

你可以用一個工作的例子創建一個jsfiddle嗎？ www.jsfiddle.com – 2010-07-21 04:20:26

@chase：www.jsfiddle。* net * - 以防萬一;） – polarblau 2011-07-13 17:47:15

Woops！我應該更清楚地知道。 – 2011-07-14 20:18:00

也許你可以先檢查哈希消除遞歸：

if(window.location.hash != foobar){ window.location.hash = foobar;}

爲什麼onHashChange處理程序無論如何改變散列？如果在加載內容之前有一些默認選擇，那麼也許可能會有一個獨立的功能。

（我這樣說是因爲它看起來像是你的某種目錄結構 - 類似於你的位置慣例 - 哈希式的，也許你在選擇根時選擇了特定的樹葉或什麼？）

來源

2010-07-20 22:38:48

事實證明，自從我閱讀了我的問題後，我不知道我想說什麼。乾杯的答案，它確實是一個目錄結構。我會檢查你的解決方案。 – 2010-08-02 06:10:38

您可以發佈您的正確解決方案或選擇一個答案作爲這個問題的正確答案嗎？ – 2010-09-20 19:35:26

嗨Tim - 我們決定不實施onHashChange「yet」。但請放心，這是我腦海中的一幕，一旦我們確實解決了它，我會讓你知道我們是如何做到的。在此之後和現在，我們可能已經發現了一個能正確處理這個問題的mootools函數，所以這可能是沒有意義的。 – 2010-12-29 05:45:05

你可以爲哈希對象實現一個觀察者，當has對象發生變化時它將觸發一個函數。它與頁面的實際加載無關。做到這一點的最好辦法是通過Object.prototype.watch
看到同一主題的其他頁面：On - window.location.hash - Change?

來源

2010-12-28 23:19:19

必須在MooTools History它實現了onhashchange如果新的HTML5 API歷史不可一看，沒有必要推倒重來:)

來源

2011-07-13 17:43:43

onHashChange運行onLoad ... awkward

回答

相關問題