2008-11-06 72 views
38

背景:我有一個HTML頁面,可讓您展開某些內容。由於只有一小部分頁面需要加載以進行這種擴展,所以通過JavaScript完成,而不是通過指向新的URL/HTML頁面。然而,作爲獎勵用戶能夠永久鏈接到這樣的擴展部分,即讓別人喜歡使用JavaScript刪除URL中的片段,導致頁面重新加載

http://example.com/#foobar

一個URL,並有「foobar的」類別中的其他用戶立即打開。這工作使用parent.location.hash ='foobar',所以這部分是好的。

現在的問題:當用戶關閉網頁上這樣的一類,我想再次清空網址片段,即把http://example.com/#foobarhttp://example.com/更新永久鏈接顯示。但是,使用parent.location.hash = ''這樣做會導致重新加載整個頁面(例如,在Firefox 3中),我希望避免這種情況。使用window.location.href = '/#'將不會觸發頁面重新加載,但會在URL中留下看起來很前衛的「#」號。那麼在流行的瀏覽器中有沒有一種方法可以在不觸發頁面刷新的情況下JavaScript去除包含「#」符號的URL定位符?

+0

此[相關問題](http://stackoverflow.com/questions/3009380/whats-the-shebang-hashbang-in-facebook-and-new-twitter-urls-for)是一個有趣的閱讀。 – 2011-05-23 09:42:27

回答

40

正如其他人提及的,在replaceState HTML5可用於刪除的網址片段。

下面是一個例子:

// remove fragment as much as it can go without adding an entry in browser history: 
window.location.replace("#"); 

// slice off the remaining '#' in HTML5:  
if (typeof window.history.replaceState == 'function') { 
    history.replaceState({}, '', window.location.href.slice(0, -1)); 
} 
7

遺憾地說,但答案是否定的,如果排空的location.hash不完成任務 - !)

+0

這真的可以嗎? – 2011-06-21 09:18:27

+0

這個答案需要刪除。這顯然是錯誤的,比至少有一個正確的答案有更多的票數。 – atomless 2015-11-26 13:11:01

14

既然你控制的散列值的動作,爲什麼不直接使用令牌手段「nothing」,如「#_」或「#default」。

+1

我認爲這是一個值得考慮的想法。 – 2008-11-06 16:55:49

+1

是的,你也可以使用一個空白錨,所以後來的網址爲http://example.com/#結束。這幾乎是完美的,但我認爲它也可能最終會讓一些參觀者略感混亂。理想情況下,whouldn't甚至是散列字符顯示... – 2008-11-07 13:06:42

+0

明顯。您的腳本應該在散列中沒有任何功能。 – 2009-05-05 10:55:03

-1
$(document).ready(function() { 
     $(".lnk").click(function(e) { 
      e.preventDefault(); 
      $(this).attr("href", "stripped_url_via_desired_regex"); 
     }); 
    }); 
+1

謝謝弗洛林,你能解釋一下這段代碼的作用嗎? – 2008-11-07 13:05:43

0

所以使用

parent.location.hash = ''第一

然後做

window.location.href=window.location.href.slice(0, -1); 
1

也有另一種選項,而不是使用哈希, 你可以使用javascript: void(0); 例子:<a href="javascript:void(0);" class="open_div">Open Div</a>

我想這也取決於當你需要怎樣的聯繫,所以你最好檢查以下鏈接:

如何使用它:http://www.brightcherry.co.uk/scribbles/2010/04/25/javascript-how-to-remove-the-trailing-hash-in-a-url/ 或檢查什麼是更好地在這裏辯論:Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

-2

正如其他說過,你不能這樣做。另外......嚴重的是,作爲jQuery Ajaxy作者 - 我已經部署了完整的ajax網站多年 - 現在我可以保證沒有最終用戶抱怨過,或者甚至沒有發現有這樣的哈希事情發生,用戶不會只要它有效並且他們得到了他們所需的東西

一個妥善的解決辦法,雖然是HTML5 pushState的/ ReplaceState/PopState ;-)這並不需要fragement標識符了: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history 對於HTML5和HTML4兼容的項目支持此HTML5狀態功能檢查https://github.com/browserstate/History.js: - )

0

放在頭部區段此代碼。

<script type="text/javascript"> 
    var uri = window.location.toString(); 
    if (uri.indexOf("?") > 0) { 
     var clean_uri = uri.substring(0, uri.indexOf("?")); 
     window.history.replaceState({}, document.title, clean_uri); 
    } 
</script> 
相關問題