2011-11-21 10 views
21

W jaki sposób jQuery może wykryć zmiany w adresie URL?Jak wykryć zmiany adresu URL za pomocą jQuery

Na przykład: jeśli użytkownik przejdzie na stronę site.com/faq/ nic się nie wyświetla, ale jeśli przejdzie do site.com/faq/#open jquery wykryje to i zrobi coś.

+1

Trzeba spojrzeć na adres [jQuery plugin] (http: //www.asual. com/jquery/address /) –

+2

@Sahil Zakładam, że chce tego, aby mógł go użyć podczas ładowania strony, na przykład aby otworzyć określoną kartę w kontrolce karty. Jest to przydatna technika, o której warto wiedzieć. –

Odpowiedz

2

Spróbuj tego:

if (window.location.hash) { 
    // Fragment exists, do something with it 
    var fragment = window.location.hash; 
} 

Tylko dla odniesienia, część adresu URL określonego przez # nazywa się „fragment”

1

Jeśli masz url site.com/faq/#open, to można zrobić

var hash = window.location.hash 

dostać hash = 'open'

6

Wystarczy spojrzeć na window.location.hash na stronie obciążenia:

$(document).ready(function() { 
    if(window.location.hash === "open") 
    { 
     //Show something 
    } 
}); 

Albo powiązać ze zdarzeniem hashchange okna:

$(document).ready(function() { 
    $(window).hashchange(hashchanged); 
}); 

function hashchanged() 
{ 
    //Show something 
} 
20

Można użyć zdarzenia hashchange.
lub zintegrować jquery hashchange plugin

$(function(){ 

    // Bind the event. 
    $(window).hashchange(hashchanged); 

    // Trigger the event (useful on page load). 
    hashchanged(); 

}); 

function hashchanged(){ 
var hash = location.hash.replace(/^#/, ''); 
//your code 
} 
+2

Zobacz także wtyczkę [jQuery BBQ] (http://benalman.com/projects/jquery-bbq-plugin/), chociaż może to być bardziej skomplikowane niż wymaga tego OP. – Blazemonger

+1

nie ma czegoś takiego jak $ (okno) .haschange, a pytanie dotyczy wykrycia zmiany adresu URL bez zmiany. – OviC

+0

'$ (window) .haschange' należy do wspomnianej wtyczki, a pytanie zostało zilustrowane na przykładzie OP – UnLoCo

18

Try This

$(window).on('hashchange', function(e){ 
// Your Code goes here 
}); 

jego pracy dla mnie

Powiązane problemy