使用JavaScript檢測URL的哈希值更改

我正在研究一個基於單頁（由於項目限制）且具有動態內容的簡單應用程序。我理解動態內容，但我不明白的是如何設置腳本，以便在URL中的哈希值發生更改時更改div的html。使用JavaScript檢測URL的哈希值更改

我需要一個JavaScript腳本，這樣的工作：

網址：http://foo.com/foo.html DIV內容：<h1>Hello World</h1>

網址：http://foo.com/foo.html#foo DIV內容：<h1>Foo</h1>

如何將這項工作？

請幫忙！謝謝。

來源

2013-02-20 user115422

看一看[森美（https://github.com/quirkey/sammy）。 – 2013-02-20 01:25:17

@Bradchristie好吧，我會看看，但理想情況下，我想避免使用插件很多...是否有可能只用jQuery？ – user115422 2013-02-20 01:26:14

讓我們看看它的現實。要麼花你額外的時間寫一些圖書館做的事，或者你只是使用圖書館並繼續前進。你已經在使用jQuery（一個庫），因爲你可能想要靈活性，而不必自己編寫它。加sammy讓你插入佔位符和模板傳入的散列（非常靈活） – 2013-02-20 01:31:59

你可以聽hashchange事件：

$(window).on('hashchange',function(){ 
    $('h1').text(location.hash.slice(1)); 
});

來源

2013-02-20 01:26:19 undefined

好吧，這可能看起來像一個愚蠢的問題，但確實因爲我總是對這方面感到困惑嗎？ – user115422 2013-02-20 01:27:02

包括它'jquery'後 – 2013-02-20 01:28:27

@RPM所以在頭？謝謝:) – user115422 2013-02-20 01:29:02

個人而言，我會使用sammy它給你的靈活性，模板包括hashtag（添加佔位符，並能夠讀取他們回來）。例如

<script src="/path/to/jquery.js"></script> 
<script src="/path/to/sammy.js"></script> 
<script> 
    $(function(){ 
     // Use sammy to detect hash changes 
     $.sammy(function(){ 
      // bind to #:page where :page can be some value 
      // we're expecting and can be retrieved with this.params 
      this.get('#:page',function(){ 
       // load some page using ajax in to an simple container 
       $('#container').load('/partial/'+this.params['page']+'.html'); 
      }); 
     }).run(); 
    }); 
</script> 

<a href="#foo">Load foo.html</a> 
<a href="#bar">Load bar.html</a>

一個例子可以在這裏找到：http://jsfiddle.net/KZknm/1/

來源

2013-02-20 01:38:27

我已經試過：''但是當我改變包括hashtag腳本犯規提醒什麼.. 。 – user115422 2013-02-20 01:43:54

@fermionoid：它doe不這樣工作。你需要通過'this.get（...）;' – 2013-02-20 02:11:52

@fermionoid綁定到更改：請參閱我的更新答案中包含的示例。 – 2013-02-20 02:19:51

使用JavaScript檢測URL的哈希值更改

回答

相關問題