Cara mendeteksi apakah URL telah berubah setelah hash dalam JavaScript

Bagaimana saya dapat memeriksa apakah suatu URL telah berubah dalam JavaScript? Misalnya, situs web seperti GitHub, yang menggunakan AJAX, akan menambahkan informasi halaman setelah simbol # untuk membuat URL unik tanpa memuat ulang halaman. Apa cara terbaik untuk mendeteksi jika URL ini berubah?

• Apakah onloadacara dipanggil lagi?
• Apakah ada pengendali acara untuk URL?
• Atau haruskah URL diperiksa setiap detik untuk mendeteksi perubahan?

Di browser modern (IE8 +, FF3.6 +, Chrome), Anda dapat mendengarkan hashchangeacara tersebut window.

Di beberapa browser lama, Anda perlu timer yang terus-menerus memeriksa location.hash. Jika Anda menggunakan jQuery, ada plugin yang melakukan hal itu.

Saya ingin dapat menambahkan locationchangependengar acara. Setelah modifikasi di bawah, kita akan dapat melakukannya, seperti ini

window.addEventListener('locationchange', function(){
    console.log('location changed!');
})

Sebaliknya, window.addEventListener('hashchange',()=>{})hanya akan menyala jika bagian setelah tagar di url berubah, dan window.addEventListener('popstate',()=>{})tidak selalu berfungsi.

Modifikasi ini, mirip dengan jawaban Christian , memodifikasi objek sejarah untuk menambahkan beberapa fungsi.

Secara default, ada popstateacara, tetapi tidak ada acara untuk pushstate, dan replacestate.

Ini memodifikasi ketiga fungsi ini sehingga semua menjalankan locationchangeacara khusus untuk Anda gunakan, dan juga pushstatedan replacestateacara jika Anda ingin menggunakannya:

/* These are the modifications: */
history.pushState = ( f => function pushState(){
    var ret = f.apply(this, arguments);
    window.dispatchEvent(new Event('pushstate'));
    window.dispatchEvent(new Event('locationchange'));
    return ret;
})(history.pushState);

history.replaceState = ( f => function replaceState(){
    var ret = f.apply(this, arguments);
    window.dispatchEvent(new Event('replacestate'));
    window.dispatchEvent(new Event('locationchange'));
    return ret;
})(history.replaceState);

window.addEventListener('popstate',()=>{
    window.dispatchEvent(new Event('locationchange'))
});

gunakan kode ini

window.onhashchange = function() { 
     //code  
}

dengan jQuery

$(window).bind('hashchange', function() {
     //code
});

EDIT setelah sedikit meneliti:

Sepertinya saya tertipu oleh dokumentasi yang ada di Mozilla docs. The popstateevent (dan fungsi callback nya onpopstate) yang tidak dipicu setiap kali pushState()atau replaceState()disebut dalam kode. Karenanya jawaban asli tidak berlaku dalam semua kasus.

Namun ada cara untuk menghindari ini dengan menambal fungsi-fungsi menurut @ alpha123 :

var pushState = history.pushState;
history.pushState = function () {
    pushState.apply(history, arguments);
    fireEvents('pushState', arguments);  // Some event-handling function
};

Jawaban asli

Mengingat bahwa judul pertanyaan ini adalah " Bagaimana mendeteksi perubahan URL " jawabannya, ketika Anda ingin tahu kapan path lengkap berubah (dan bukan hanya anchor hash), adalah Anda dapat mendengarkan popstateacara:

window.onpopstate = function(event) {
  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

Referensi untuk popstate di Mozilla Docs

Saat ini (Jan 2017) ada dukungan untuk popstate dari 92% browser di seluruh dunia.

Dengan jquery (dan plug-in) yang bisa Anda lakukan

$(window).bind('hashchange', function() {
 /* things */
});

http://benalman.com/projects/jquery-hashchange-plugin/

Kalau tidak ya, Anda harus menggunakan setInterval dan memeriksa perubahan dalam acara hash (window.location.hash)

Memperbarui! Draf sederhana

function hashHandler(){
    this.oldHash = window.location.hash;
    this.Check;

    var that = this;
    var detect = function(){
        if(that.oldHash!=window.location.hash){
            alert("HASH CHANGED - new has" + window.location.hash);
            that.oldHash = window.location.hash;
        }
    };
    this.Check = setInterval(function(){ detect() }, 100);
}

var hashDetection = new hashHandler();

Tambahkan hash ubah pendengar acara!

window.addEventListener('hashchange', function(e){console.log('hash changed')});

Atau, untuk mendengarkan semua perubahan URL:

window.addEventListener('popstate', function(e){console.log('url changed')});

Ini lebih baik daripada sesuatu seperti kode di bawah ini karena hanya satu hal yang bisa ada di window.onhashchange dan Anda mungkin akan menimpa kode orang lain.

// Bad code example

window.onhashchange = function() { 
     // Code that overwrites whatever was previously in window.onhashchange  
}

solusi ini bekerja untuk saya:

var oldURL = "";
var currentURL = window.location.href;
function checkURLchange(currentURL){
    if(currentURL != oldURL){
        alert("url changed!");
        oldURL = currentURL;
    }

    oldURL = window.location.href;
    setInterval(function() {
        checkURLchange(window.location.href);
    }, 1000);
}

checkURLchange();

Meskipun merupakan pertanyaan lama, proyek Location-bar sangat berguna.

var LocationBar = require("location-bar");
var locationBar = new LocationBar();

// listen to all changes to the location bar
locationBar.onChange(function (path) {
  console.log("the current url is", path);
});

// listen to a specific change to location bar
// e.g. Backbone builds on top of this method to implement
// it's simple parametrized Backbone.Router
locationBar.route(/some\-regex/, function () {
  // only called when the current url matches the regex
});

locationBar.start({
  pushState: true
});

// update the address bar and add a new entry in browsers history
locationBar.update("/some/url?param=123");

// update the address bar but don't add the entry in history
locationBar.update("/some/url", {replace: true});

// update the address bar and call the `change` callback
locationBar.update("/some/url", {trigger: true});

Untuk mendengarkan perubahan url, lihat di bawah:

window.onpopstate = function(event) {
  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

Gunakan gaya ini jika Anda bermaksud untuk menghentikan / menghapus pendengar setelah beberapa kondisi tertentu.

window.addEventListener('popstate', function(e) {
   console.log('url changed')
});

Saat melakukan sedikit ekstensi chrome, saya menghadapi masalah yang sama dengan masalah tambahan: Kadang-kadang, halaman berubah tetapi tidak URL.

Misalnya, cukup buka Beranda Facebook, dan klik tombol 'Beranda'. Anda akan memuat ulang halaman tetapi URL tidak akan berubah (gaya aplikasi satu halaman).

99% dari waktu, kami mengembangkan situs web sehingga kami bisa mendapatkan acara tersebut dari Kerangka seperti Angular, React, Vue dll.

TAPI , dalam kasus ekstensi Chrome saya (di Vanilla JS), saya harus mendengarkan acara yang akan memicu untuk setiap "perubahan halaman", yang umumnya dapat ditangkap oleh URL yang diubah, tetapi kadang-kadang tidak.

Solusi buatan saya adalah sebagai berikut:

listen(window.history.length);
var oldLength = -1;
function listen(currentLength) {
  if (currentLength != oldLength) {
    // Do your stuff here
  }

  oldLength = window.history.length;
  setTimeout(function () {
    listen(window.history.length);
  }, 1000);
}

Jadi pada dasarnya solusi leoneckert, diterapkan pada window history, yang akan berubah ketika suatu halaman berubah dalam satu aplikasi halaman.

Bukan ilmu roket, tetapi solusi terbersih yang saya temukan, mengingat kita hanya memeriksa kesetaraan bilangan bulat di sini, dan bukan objek yang lebih besar atau seluruh DOM.

Lihatlah fungsi jQuery unload. Ini menangani semua hal.

https://api.jquery.com/unload/

Acara bongkar dikirim ke elemen jendela ketika pengguna menavigasi jauh dari halaman. Ini bisa berarti satu dari banyak hal. Pengguna bisa mengklik tautan untuk meninggalkan halaman, atau mengetik URL baru di bilah alamat. Tombol maju dan mundur akan memicu acara. Menutup jendela browser akan menyebabkan acara menjadi terpicu. Bahkan memuat ulang halaman terlebih dahulu akan membuat acara bongkar.

$(window).unload(
    function(event) {
        alert("navigating");
    }
);

window.addEventListener("beforeunload", function (e) {
    // do something
}, false);

Jawaban di bawah ini berasal dari sini (dengan sintaks javascript lama (tidak ada fungsi panah, mendukung IE 10+)): https://stackoverflow.com/a/52809105/9168962

(function() {
  if (typeof window.CustomEvent === "function") return false; // If not IE
  function CustomEvent(event, params) {
    params = params || {bubbles: false, cancelable: false, detail: null};
    var evt = document.createEvent("CustomEvent");
    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
    return evt;
  }
  window.CustomEvent = CustomEvent;
})();

(function() {
  history.pushState = function (f) {
    return function pushState() {
      var ret = f.apply(this, arguments);
      window.dispatchEvent(new CustomEvent("pushState"));
      window.dispatchEvent(new CustomEvent("locationchange"));
      return ret;
    };
  }(history.pushState);
  history.replaceState = function (f) {
    return function replaceState() {
      var ret = f.apply(this, arguments);
      window.dispatchEvent(new CustomEvent("replaceState"));
      window.dispatchEvent(new CustomEvent("locationchange"));
      return ret;
    };
  }(history.replaceState);
  window.addEventListener("popstate", function() {
    window.dispatchEvent(new CustomEvent("locationchange"));
  });
})();

Cara sederhana lain yang dapat Anda lakukan adalah dengan menambahkan acara klik, melalui nama kelas ke jangkar tag pada halaman untuk mendeteksi kapan telah diklik, maka Anda sekarang dapat menggunakan window.location.href untuk mendapatkan data url yang Anda dapat menggunakan untuk menjalankan permintaan ajax Anda ke server. Sederhana dan Mudah.

Anda memulai yang baru setIntervaldi setiap panggilan, tanpa membatalkan yang sebelumnya - mungkin Anda hanya bermaksud memilikisetTimeout