URL bağlantı değişikliği olayını js'de işleme

90

URL bağlantısındaki herhangi bir değişiklikte yürütülecek JavaScript geri arama kodunu nasıl yazabilirim?

Örnek için http://example.com#aiçinhttp://example.com#b

— Bogdan Gusiev
kaynak

128

Google Özel Arama Motorları, karmayı önceki bir değere göre kontrol etmek için bir zamanlayıcı kullanırken, ayrı bir alandaki alt iframe, iframe belgesinin gövdesinin boyutunu içerecek şekilde üst öğenin konum karmasını günceller. Zamanlayıcı değişikliği yakaladığında, üst öğe, kaydırma çubuklarının görüntülenmemesi için iframe'i gövdeninkiyle eşleşecek şekilde yeniden boyutlandırabilir.

Aşağıdakine benzer bir şey aynı şeyi başarır:

var storedHash = window.location.hash;
window.setInterval(function () {
    if (window.location.hash != storedHash) {
        storedHash = window.location.hash;
        hashChanged(storedHash);
    }
}, 100); // Google uses 100ms intervals I think, might be lower

Google Chrome 5, Safari 5, Opera 10.60 , Firefox 3.6 ve Internet Explorer 8'in tümühashchange etkinliği destekler :

if ("onhashchange" in window) // does the browser support the hashchange event?
    window.onhashchange = function () {
        hashChanged(window.location.hash);
    }

ve bir araya getirmek:

if ("onhashchange" in window) { // event supported?
    window.onhashchange = function () {
        hashChanged(window.location.hash);
    }
}
else { // event not supported:
    var storedHash = window.location.hash;
    window.setInterval(function () {
        if (window.location.hash != storedHash) {
            storedHash = window.location.hash;
            hashChanged(storedHash);
        }
    }, 100);
}

jQuery ayrıca hashchange olayını kontrol edecek ve gerekirse kendi eklentisini sağlayacak bir eklentiye sahiptir - http://benalman.com/projects/jquery-hashchange-plugin/ .

DÜZENLEME : Güncellenmiş tarayıcı desteği (tekrar).

— Andy E
kaynak

tamlık için bir var storedHash = window.location.hash;araya getirme özet bloğuna ekleyin . Btw: Bugünlerde buna polyfill deniyor sanırım.

— Frank Nocke

1

Bugünlerde dinleyebilirsiniz hashChangeüzerinde window stackoverflow.com/questions/6390341/how-to-detect-url-change

— Timo Huovinen

@AndyE Cevabı okudum, küçük notu kaçırdım ve buna benzeyen olayları hiç görmedimhashChanged(storedHash);

— Timo Huovinen

1

@TimoHuovinen: hashChangedBu durumda, bu kodu kullanan bir geliştirici tarafından uygulanan bir işlev olması amaçlanmıştır. Buradaki cevap, yalnızca onhashchangeolayın mevcut olmadığı durumlarda değişiklik için hash'in nasıl izlenebileceğini gösterir ve evrensel bir çözüm sağlamak için olaya dayalı ve zamanlayıcı tabanlı yaklaşımları birleştirir. Demek istediğim, bağlantı kurduğunuz yanıt buradaki yanıta kesinlikle hiçbir şey eklemiyor ;-). Aynı temel bilgileri, hatta Ben Alman'ın jQuery eklentisine olan bağlantıyı sağlarlar. Tek fark, cevabımda saf bir JS çözümü sağlamamdır.

— Andy E

1

Hafif bir JS yönlendirici arıyordum ama bu işi güzelce yaptı. Ayrıca tüm bağımlılıklar ortadan kaldırıldı :)

— gskema

5

addEventListenerÜzerine yazmak yerine kullanmanızı tavsiye ederim window.onhashchange, aksi takdirde diğer eklentiler için etkinliği engelleyeceksiniz.

window.addEventListener('hashchange', function() {
...
})

Bugünün küresel tarayıcı kullanımına bakıldığında, artık bir geri dönüşe gerek yoktur.

— Fabian von Ellerts
kaynak

3

Diğer SO sorularında gördüğüm kadarıyla, tarayıcılar arası uygulanabilir tek çözüm bir zamanlayıcıdır. Örneğin bu soruyu kontrol edin .

— Pekka
kaynak

3

setInterval()şimdilik sadece evrensel bir çözüm. Ancak gelecekte hashchange olayı şeklinde bir miktar ışık var

— NilColor
kaynak

Bilginize: Mozilla Developer Network'tekionhashchange etkinliğin belgeleri

2

(Sadece kayıt için.) YUI3 "hashchange" sentetik olayı, kabul edilen yanıtla aşağı yukarı aynı şeyi yapar

YUI().use('history-hash', function (Y) {
  Y.on('hashchange', function (e) {
    // Handle hashchange events on the current window.
  }, Y.config.win);
});

— mjhm
kaynak

0

Bundan daha fazla bilgi alabilirsiniz

Mutasyon olay türleri

Mutasyon olay modülü, öznitelik ve metin değişiklikleri de dahil olmak üzere bir belgenin yapısındaki herhangi bir değişikliğin bildirimine izin verecek şekilde tasarlanmıştır.

— Rahul
kaynak

Bu, DOM değişiklikleriyle ilgili.

— Raj