Cách phát hiện nếu URL đã thay đổi sau khi băm trong JavaScript

Làm cách nào để kiểm tra xem URL có thay đổi trong JavaScript không? Ví dụ: các trang web như GitHub, sử dụng AJAX, sẽ nối thêm thông tin trang sau ký hiệu # để tạo URL duy nhất mà không cần tải lại trang. Cách tốt nhất để phát hiện nếu URL này thay đổi là gì?

• Là onloadsự kiện được gọi lại?
• Có một trình xử lý sự kiện cho URL?
• Hoặc phải kiểm tra URL mỗi giây để phát hiện thay đổi?

Trong các trình duyệt hiện đại (IE8 +, FF3.6 +, Chrome), bạn chỉ có thể nghe hashchangesự kiện trên window.

Trong một số trình duyệt cũ, bạn cần một bộ đếm thời gian liên tục kiểm tra location.hash. Nếu bạn đang sử dụng jQuery, có một plugin thực hiện chính xác điều đó.

Tôi muốn có thể thêm locationchangengười nghe sự kiện. Sau khi sửa đổi bên dưới, chúng tôi sẽ có thể làm điều đó, như thế này

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

Ngược lại, window.addEventListener('hashchange',()=>{})sẽ chỉ kích hoạt nếu phần sau khi hashtag trong url thay đổi và window.addEventListener('popstate',()=>{})không phải lúc nào cũng hoạt động.

Sửa đổi này, tương tự như câu trả lời của Christian , sửa đổi đối tượng lịch sử để thêm một số chức năng.

Theo mặc định, có một popstatesự kiện, nhưng không có sự kiện nào cho pushstatevà replacestate.

Này sửa đổi ba chức năng để tất cả lửa một phong tục locationchangesự kiện cho bạn để sử dụng, và cũng có thể pushstatevà replacestatesự kiện nếu bạn muốn sử dụng những:

/* 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'))
});

sử dụng mã này

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

với jQuery

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

EDIT sau một chút nghiên cứu:

Dường như tôi đã bị đánh lừa bởi tài liệu có trên tài liệu Mozilla. Sự popstatekiện (và chức năng gọi lại của nó onpopstate) không được kích hoạt bất cứ khi nào pushState()hoặc replaceState()được gọi trong mã. Do đó, câu trả lời ban đầu không áp dụng trong mọi trường hợp.

Tuy nhiên, có một cách để khắc phục điều này bằng cách vá khỉ các chức năng theo @ alpha123 :

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

Câu trả lời gốc

Cho rằng tiêu đề của câu hỏi này là " Cách phát hiện thay đổi URL " câu trả lời, khi bạn muốn biết khi nào đường dẫn đầy đủ thay đổi (và không chỉ là mỏ neo băm), là bạn có thể lắng nghe popstatesự kiện:

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

Tham chiếu cho popstate trong Mozilla Docs

Hiện tại (tháng 1 năm 2017) có hỗ trợ cho popstate từ 92% trình duyệt trên toàn thế giới.

Với jquery (và một trình cắm thêm), bạn có thể làm

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

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

Nếu không, bạn sẽ phải sử dụng setInterval và kiểm tra sự thay đổi trong sự kiện băm (window.location.hash)

Cập nhật! Một bản nháp đơn giản

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();

Thêm một người nghe sự kiện thay đổi băm!

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

Hoặc, để lắng nghe tất cả các thay đổi URL:

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

Điều này tốt hơn một cái gì đó giống như mã dưới đây vì chỉ có một thứ có thể tồn tại trong window.onhashchange và bạn có thể sẽ ghi đè mã của người khác.

// Bad code example

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

giải pháp này hiệu quả với tôi:

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();

Mặc dù là một câu hỏi cũ, dự án thanh vị trí rất hữu ích.

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});

Để nghe thay đổi url, xem bên dưới:

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

Sử dụng phong cách này nếu bạn có ý định dừng / loại bỏ người nghe sau một số điều kiện nhất định.

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

Trong khi thực hiện một phần mở rộng chrome nhỏ, tôi đã gặp phải vấn đề tương tự với một vấn đề bổ sung: Đôi khi, trang thay đổi nhưng không phải là URL.

Chẳng hạn, chỉ cần truy cập Trang chủ Facebook và nhấp vào nút 'Trang chủ'. Bạn sẽ tải lại trang nhưng URL sẽ không thay đổi (kiểu ứng dụng một trang).

99% thời gian, chúng tôi đang phát triển các trang web để chúng tôi có thể nhận các sự kiện đó từ các Khung như Angular, React, Vue, v.v.

NHƯNG , trong trường hợp tiện ích mở rộng của Chrome (trong Vanilla JS), tôi đã phải nghe một sự kiện sẽ kích hoạt cho mỗi "thay đổi trang", thường có thể bị bắt bởi URL đã thay đổi, nhưng đôi khi không.

Giải pháp tự chế của tôi là như sau:

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);
}

Về cơ bản, giải pháp leoneckert, được áp dụng cho lịch sử cửa sổ, sẽ thay đổi khi một trang thay đổi trong một ứng dụng trang.

Không phải khoa học tên lửa, nhưng giải pháp sạch nhất tôi tìm thấy, vì chúng tôi chỉ kiểm tra một đẳng thức nguyên ở đây, và không phải là các đối tượng lớn hơn hoặc toàn bộ DOM.

Nhìn vào hàm unload jQuery. Nó xử lý tất cả mọi thứ.

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

Sự kiện dỡ tải được gửi đến thành phần cửa sổ khi người dùng điều hướng khỏi trang. Điều này có thể có nghĩa là một trong nhiều điều. Người dùng có thể đã nhấp vào một liên kết để rời khỏi trang hoặc nhập một URL mới trong thanh địa chỉ. Các nút chuyển tiếp và quay lại sẽ kích hoạt sự kiện. Đóng cửa sổ trình duyệt sẽ khiến sự kiện được kích hoạt. Ngay cả một trang tải lại đầu tiên sẽ tạo ra một sự kiện dỡ tải.

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

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

Câu trả lời dưới đây xuất phát từ đây (với cú pháp javascript cũ (không có chức năng mũi tên, hỗ trợ 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"));
  });
})();

Một cách đơn giản khác mà bạn có thể thực hiện là bằng cách thêm một sự kiện nhấp chuột, thông qua tên lớp vào thẻ neo trên trang để phát hiện khi nào nó được nhấp, sau đó bạn có thể sử dụng window.location.href để lấy dữ liệu url bạn có thể sử dụng để chạy yêu cầu ajax của bạn đến máy chủ. Đơn giản và dễ dàng.

Bạn đang bắt đầu một setIntervalcuộc gọi mới ở mỗi cuộc gọi mà không hủy cuộc gọi trước đó - có lẽ bạn chỉ muốn có một cuộc gọisetTimeout