บน - window.location.hash - เปลี่ยนหรือไม่

ฉันใช้อาแจ็กซ์และแฮสำหรับการนำทาง

มีวิธีตรวจสอบการwindow.location.hashเปลี่ยนแปลงเช่นนี้หรือไม่?

http://example.com/blah # 123ถึงhttp://example.com/blah # 456

มันทำงานได้ถ้าฉันตรวจสอบเมื่อเอกสารโหลด

แต่ถ้าฉันใช้การนำทาง #hash จะไม่ทำงานเมื่อฉันกดปุ่มย้อนกลับบนเบราว์เซอร์ (ดังนั้นฉันจึงข้ามจาก blah # 456 ไปยัง blah # 123)

มันแสดงอยู่ข้างในกล่องที่อยู่ แต่ฉันไม่สามารถจับมันด้วย JavaScript

วิธีเดียวที่จะทำสิ่งนี้ได้อย่างแท้จริง (และเป็นวิธีการที่ 'realsimplehistory' ทำอย่างนี้) คือการกำหนดช่วงเวลาที่คอยตรวจสอบแฮชปัจจุบันและเปรียบเทียบกับสิ่งที่เคยเป็นมาก่อนเราทำสิ่งนี้และให้สมาชิกสมัครสมาชิกเพื่อเปลี่ยน เหตุการณ์ที่เราเริ่มต้นหากแฮชเปลี่ยนไป .. มันไม่สมบูรณ์ แต่เบราว์เซอร์ไม่รองรับเหตุการณ์นี้โดยกำเนิด

อัปเดตเพื่อให้คำตอบใหม่อยู่เสมอ:

หากคุณกำลังใช้ jQuery (ซึ่งวันนี้ควรจะเป็นพื้นฐานสำหรับคนส่วนใหญ่) วิธีแก้ปัญหาที่ดีก็คือการใช้ abstraction ที่ jQuery ให้คุณโดยใช้ระบบกิจกรรมเพื่อฟังเหตุการณ์ hashchange บนวัตถุหน้าต่าง

$(window).on('hashchange', function() {
  //.. work ..
});

สิ่งที่ดีที่นี่คือคุณสามารถเขียนโค้ดที่ไม่จำเป็นต้องกังวลเกี่ยวกับการสนับสนุน hashchange แต่คุณต้องทำเวทมนต์ในรูปแบบของคุณสมบัติ jQuery ที่รู้จักกันน้อยกว่าjQuery กิจกรรมพิเศษกิจกรรมพิเศษ

ด้วยคุณสมบัตินี้คุณจะต้องเรียกใช้รหัสการตั้งค่าสำหรับเหตุการณ์ใด ๆ เป็นครั้งแรกที่มีคนพยายามใช้เหตุการณ์ในลักษณะใด ๆ (เช่นผูกกับเหตุการณ์)

ในรหัสการตั้งค่านี้คุณสามารถตรวจสอบการสนับสนุนเบราว์เซอร์ดั้งเดิมและหากเบราว์เซอร์ไม่ได้ใช้สิ่งนี้คุณสามารถตั้งค่าตัวจับเวลาเดี่ยวเพื่อสำรวจความเปลี่ยนแปลงและเรียกใช้เหตุการณ์ jQuery

นี้อย่างสมบูรณ์ unbinds รหัสของคุณจากต้องเข้าใจปัญหานี้สนับสนุนการดำเนินงานของกิจกรรมพิเศษชนิดนี้เป็นที่น่ารำคาญ (ง่ายที่จะได้รับรุ่นที่ทำงาน 98%) แต่ทำไมทำอย่างนั้นเมื่อมีคนอื่นที่มีอยู่แล้ว

HTML5 ระบุhashchangeเหตุการณ์ เหตุการณ์นี้เป็นที่ตอนนี้ได้รับการสนับสนุนจากเบราว์เซอร์ที่ทันสมัย มีการเพิ่มการสนับสนุนในเบราว์เซอร์เวอร์ชันต่อไปนี้:

• Internet Explorer 8
• Firefox 3.6
• Chrome 5
• Safari 5
• Opera 10.6

โปรดทราบว่าในกรณีของ Internet Explorer 7 และ Internet Explorer 9 สถานะifจะเป็นจริง (สำหรับ "onhashchange" ใน windows) แต่window.onhashchangeจะไม่ทำงานดังนั้นจึงดีกว่าที่จะเก็บแฮชและตรวจสอบทุก ๆ 100 มิลลิวินาทีไม่ว่าจะเปลี่ยนหรือไม่ สำหรับ Internet Explorer ทุกรุ่น

    if (("onhashchange" in window) && !($.browser.msie)) {
         window.onhashchange = function () {
              alert(window.location.hash);
         }
         // Or $(window).bind( 'hashchange',function(e) {
         //       alert(window.location.hash);
         //   });
    }
    else {
        var prevHash = window.location.hash;
        window.setInterval(function () {
           if (window.location.hash != prevHash) {
              prevHash = window.location.hash;
              alert(window.location.hash);
           }
        }, 100);
    }

แก้ไข - ตั้งแต่ jQuery 1.9 $.browser.msieไม่ได้รับการสนับสนุน ที่มา: http://api.jquery.com/jquery.browser/

มีเทคนิคมากมายในการจัดการประวัติและ window.location.hash ในเบราว์เซอร์ IE:

• ตามคำถามเดิมกล่าวว่าถ้าคุณไปจากหน้า a.html # b ถึง a.html # c จากนั้นกดปุ่มย้อนกลับเบราว์เซอร์ไม่ทราบว่าหน้านั้นมีการเปลี่ยนแปลง ให้ฉันพูดด้วยตัวอย่าง: window.location.href จะเป็น 'a.html # c' ไม่ว่าคุณจะอยู่ใน a.html # b หรือ a.html # c

• ที่จริงแล้ว a.html # b และ a.html # c ถูกเก็บไว้ในประวัติเฉพาะในกรณีที่มีองค์ประกอบ '<a name="#b">' และ '<a name="#c">' มีอยู่ก่อนหน้านี้ในหน้า

• อย่างไรก็ตามหากคุณใส่ iframe ไว้ในหน้าให้นำทางจาก a.html # b ไปยัง a.html # c ใน iframe นั้นแล้วกดปุ่มย้อนกลับ iframe.contentWindow.document.location.href จะเปลี่ยนตามที่คาดไว้

• หากคุณใช้ 'document.domain = something ' ในรหัสของคุณคุณจะไม่สามารถเข้าถึง iframe.contentWindow.document.open () '(และผู้จัดการประวัติหลายคนทำเช่นนั้น)

ฉันรู้ว่านี่ไม่ใช่การตอบสนองที่แท้จริง แต่อาจมีบางคนที่เป็นประโยชน์

Firefox มีเหตุการณ์ onhashchange ตั้งแต่ 3.6 ดูwindow.onhashchange

Ben Alman มีปลั๊กอิน jQuery ที่ยอดเยี่ยมสำหรับจัดการกับสิ่งนี้: http://benalman.com/projects/jquery-hashchange-plugin/

หากคุณไม่ได้ใช้ jQuery อาจเป็นข้อมูลอ้างอิงที่น่าสนใจในการตัดทอน

คุณสามารถนำผู้สังเกตการณ์ (วิธี "เฝ้าดู") ไปใช้กับคุณสมบัติ "แฮช" ของวัตถุ "window.location" ได้อย่างง่ายดาย

Firefox มีการใช้งานของตัวเองสำหรับการดูการเปลี่ยนแปลงของวัตถุแต่ถ้าคุณใช้การใช้งานอื่น ๆ (เช่นการเปลี่ยนแปลงการดูคุณสมบัติของวัตถุใน JavaScript ) - สำหรับเบราว์เซอร์อื่น ๆ นั่นจะเป็นการหลอกลวง

รหัสจะมีลักษณะดังนี้:

window.location.watch(
    'hash',
    function(id,oldVal,newVal){
        console.log("the window's hash value has changed from "+oldval+" to "+newVal);
    }
);

จากนั้นคุณสามารถทดสอบได้:

var myHashLink = "home";
window.location = window.location + "#" + myHashLink;

และแน่นอนว่าจะเรียกใช้ฟังก์ชันผู้สังเกตการณ์ของคุณ

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

ฉันดูพารามิเตอร์แฮชโดยใช้

window.addEventListener('hashchange', doSomethingWithChangeFunction());

แล้วก็

doSomethingWithChangeFunction () { 
    // Get new hash value
    let urlParam = window.location.hash;
    // Do something with new hash value
};

ใช้การรักษาทำงานกับปุ่มเบราว์เซอร์ไปข้างหน้าและย้อนกลับ

มีการใช้งานที่เหมาะสมที่http://code.google.com/p/reallysimplehistory/ http://code.google.com/p/reallysimplehistory/ปัญหา (และเท่านั้น) เท่านั้นและข้อผิดพลาดที่มีคือ: ใน Internet Explorer การแก้ไขแฮชตำแหน่งด้วยตนเองจะรีเซ็ตสแต็คประวัติทั้งหมด (นี่เป็นปัญหาเบราว์เซอร์และไม่สามารถแก้ไขได้)

หมายเหตุ Internet Explorer 8 รองรับกิจกรรม "hashchange" และเนื่องจากกำลังเป็นส่วนหนึ่งของ HTML5 คุณอาจคาดว่าเบราว์เซอร์อื่น ๆ

การใช้งานที่ยอดเยี่ยมอีกอย่างหนึ่งคือประวัติ jQueryซึ่งจะใช้เนทีฟ onhashchange ถ้ามันรองรับเบราว์เซอร์ถ้าไม่ใช่มันจะใช้ iframe หรือช่วงเวลาที่เหมาะสมสำหรับเบราว์เซอร์ นอกจากนี้ยังมีอินเทอร์เฟซที่ดีในการผูกกับบางสถานะ

อีกหนึ่งโครงการที่น่าสังเกตก็คือjQuery Ajaxyซึ่งเป็นส่วนเสริมสำหรับประวัติ jQuery เพื่อเพิ่ม ajax ให้กับการผสมผสาน เมื่อคุณเริ่มใช้ Ajax กับแฮชมันค่อนข้างซับซ้อน !

var page_url = 'http://www.yoursite.com/'; // full path leading up to hash;
var current_url_w_hash = page_url + window.location.hash; // now you might have something like: http://www.yoursite.com/#123

function TrackHash() {
    if (document.location != page_url + current_url_w_hash) {
        window.location = document.location;
    }
    return false;
}
var RunTabs = setInterval(TrackHash, 200);

เพียงเท่านี้ ... ตอนนี้เมื่อใดก็ตามที่คุณกดปุ่มย้อนกลับหรือไปข้างหน้าหน้าจะโหลดใหม่ตามค่าแฮชใหม่

ฉันใช้ path.js สำหรับการกำหนดเส้นทางฝั่งไคลเอ็นต์ ฉันพบว่ามันค่อนข้างรัดกุมและมีน้ำหนักเบา (มันถูกเผยแพร่ไปยัง NPM ด้วย) และใช้ประโยชน์จากการนำทางแบบแฮช

path.js NPM

path.js GitHub

ฉันใช้ปลั๊กอิน jQuery, HUtilและเขียนประวัติยูอิเช่นอินเทอร์เฟซที่อยู่ด้านบน

ลองดูสักครั้ง หากคุณต้องการความช่วยเหลือฉันสามารถช่วย