Как определить, изменился ли URL после хэша в JavaScript

Как я могу проверить, изменился ли URL в JavaScript? Например, веб-сайты, такие как GitHub, которые используют AJAX, будут добавлять информацию о странице после символа #, чтобы создать уникальный URL-адрес без перезагрузки страницы. Как лучше всего определить, изменяется ли этот URL?

• Является ли onloadназывается событие еще раз?
• Есть ли обработчик событий для URL?
• Или URL должен проверяться каждую секунду, чтобы обнаружить изменение?

В современных браузерах (IE8 +, FF3.6 +, Chrome) вы можете просто прослушать hashchangeсобытие window.

В некоторых старых браузерах вам нужен таймер, который постоянно проверяет location.hash . Если вы используете jQuery, есть плагин, который делает именно это.

Я хотел иметь возможность добавлять locationchangeслушателей событий. После изменения ниже мы сможем сделать это, как это

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

Напротив, window.addEventListener('hashchange',()=>{})будет срабатывать только в том случае, если часть после хэштега в URL-адресе изменяется и window.addEventListener('popstate',()=>{})не всегда работает.

Эта модификация, аналогичная ответу Кристиана , изменяет объект истории, чтобы добавить некоторую функциональность.

По умолчанию есть popstateсобытие, но нет событий для pushstateи replacestate.

Это изменяет эти три функции, так что все они запускают пользовательское locationchangeсобытие для вас, а также pushstateи replacestateсобытия, если вы хотите их использовать:

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

используйте этот код

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

с помощью jQuery

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

РЕДАКТИРОВАТЬ после небольшого исследования:

Почему-то кажется, что меня одурачила документация, представленная в документации по Mozilla. popstateСобытие (и его функции обратного вызова onpopstate) являются не срабатывает всякий раз , когда pushState()или replaceState()вызываются в коде. Поэтому оригинальный ответ не применяется во всех случаях.

Однако есть способ обойти это, исправляя функции в соответствии с @ alpha123 :

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

Оригинальный ответ

Учитывая, что заголовок этого вопроса - « Как обнаружить изменение URL », ответ, когда вы хотите знать, когда меняется полный путь (а не только хэш-привязка), заключается в том, что вы можете прослушивать popstateсобытие:

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

Ссылка для popstate в Mozilla Docs

В настоящее время (январь 2017 г.) поддержка popstate поддерживается 92% браузеров по всему миру.

С JQuery (и плагин) вы можете сделать

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

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

В противном случае да, вам придется использовать setInterval и проверить наличие изменений в хеш-событии (window.location.hash)

Обновить! Простой проект

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

Добавьте слушателя события изменения хэша!

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

Или, чтобы прослушать все изменения URL:

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

Это лучше, чем приведенный ниже код, потому что в window.onhashchange может существовать только одна вещь, и вы, возможно, будете перезаписывать чужой код.

// Bad code example

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

это решение работало для меня:

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

Хотя старый вопрос, проект Location-bar очень полезен.

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

Чтобы прослушать изменения URL, см. Ниже:

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

Используйте этот стиль, если вы собираетесь остановить / удалить слушателя после определенного условия.

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

Делая небольшое расширение Chrome, я столкнулся с той же проблемой с дополнительной проблемой: иногда меняются страницы, но не URL-адреса.

Например, просто перейдите на домашнюю страницу Facebook и нажмите кнопку «Домой». Вы перезагрузите страницу, но URL не изменится (стиль одностраничного приложения).

В 99% случаев мы занимаемся разработкой веб-сайтов, чтобы мы могли получать такие события от таких структур, как Angular, React, Vue и т. Д.

НО , в моем случае с расширением Chrome (в Vanilla JS) мне приходилось прослушивать событие, которое будет срабатывать при каждом «изменении страницы», которое обычно можно отследить по измененному URL-адресу, но иногда это не так.

Моим домашним решением было следующее:

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

Таким образом, в основном решение leoneckert, примененное к истории окон, будет меняться при изменении страницы в одностраничном приложении.

Не ракетостроение, а самое чистое решение, которое я нашел, учитывая, что мы здесь проверяем только целочисленное равенство, а не большие объекты или весь DOM.

Посмотрите на функцию выгрузки jQuery. Он обрабатывает все вещи.

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

Событие unload отправляется элементу окна, когда пользователь уходит со страницы. Это может означать одно из многих. Пользователь мог щелкнуть ссылку, чтобы покинуть страницу, или ввести новый URL-адрес в адресной строке. Кнопки «Вперед» и «Назад» активируют событие. Закрытие окна браузера вызовет событие. Даже перезагрузка страницы сначала создаст событие выгрузки.

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

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

Ниже приводится ответ (со старым синтаксисом JavaScript (без функции стрелки, поддержка 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"));
  });
})();

Еще один простой способ сделать это - добавить событие click через имя класса к тегам привязки на странице, чтобы определить, когда на него щелкнули, затем вы можете использовать window.location.href, чтобы получить данные URL, которые Вы можете использовать для запуска вашего запроса AJAX на сервер. Просто и легко.

Вы начинаете новый setIntervalпри каждом вызове, не отменяя предыдущий - вероятно, вы только хотели иметьsetTimeout