วิธีการตรวจสอบว่ามีการเปลี่ยนแปลง 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เหตุการณ์ แต่มีเหตุการณ์ไม่และpushstatereplacestate

นี่เป็นการแก้ไขฟังก์ชั่นทั้งสามนี้เพื่อให้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)

Update! ร่างง่าย ๆ

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

ในขณะที่ทำการขยายโครเมี่ยมเล็กน้อยฉันประสบปัญหาเดียวกันกับปัญหาเพิ่มเติม: บางครั้งหน้าเปลี่ยนไป แต่ไม่ใช่ URL

ตัวอย่างเช่นเพียงไปที่หน้าแรกของ Facebook และคลิกที่ปุ่ม 'หน้าแรก' คุณจะโหลดหน้าซ้ำ แต่ URL จะไม่เปลี่ยนแปลง (สไตล์แอปหนึ่งหน้า)

99% ของเวลาเราเป็นผู้พัฒนาเว็บไซต์เพื่อให้เราสามารถรับเหตุการณ์เหล่านั้นได้จาก Frameworks เช่น 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/

เหตุการณ์ยกเลิกการโหลดถูกส่งไปยังองค์ประกอบหน้าต่างเมื่อผู้ใช้นำทางออกจากหน้า นี่อาจหมายถึงหนึ่งในหลาย ๆ สิ่ง ผู้ใช้สามารถคลิกที่ลิงค์เพื่อออกจากหน้าหรือพิมพ์ URL ใหม่ในแถบที่อยู่ ปุ่มไปข้างหน้าและย้อนกลับจะทำให้เกิดเหตุการณ์ การปิดหน้าต่างเบราว์เซอร์จะทำให้เหตุการณ์ถูกเรียกใช้ แม้แต่การโหลดซ้ำหน้าเว็บจะสร้างเหตุการณ์การยกเลิกการโหลดครั้งแรก

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

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

คำตอบด้านล่างมาจากที่นี่ (ด้วยไวยากรณ์จาวาสคริปต์เก่า (ไม่มีฟังก์ชั่นลูกศร, รองรับ 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"));
  });
})();

อีกวิธีง่ายๆที่คุณสามารถทำได้คือการเพิ่มเหตุการณ์การคลิกผ่านชื่อคลาสไปยังแท็กจุดยึดบนหน้าเพื่อตรวจสอบเมื่อมีการคลิกจากนั้นคุณสามารถใช้ window.location.href เพื่อรับข้อมูล URL ซึ่ง คุณสามารถใช้เพื่อรันคำขอ ajax ของคุณไปยังเซิร์ฟเวอร์ ง่ายและสะดวก

คุณกำลังเริ่มต้นใหม่setIntervalในแต่ละการโทรโดยไม่ต้องยกเลิกก่อนหน้า - คุณอาจหมายถึงการมีเพียงsetTimeout