เมื่อเร็ว ๆ นี้ฉันกำลังเรียนรู้กระดูกสันหลัง เมื่อเรียนรู้ที่จะเข้าใจกระดูกสันหลังคุณต้องเข้าใจสปาก่อน เมื่อทำความเข้าใจกับสปาคุณต้องเข้าใจก่อนว่าแอปพลิเคชันหน้าเดียวสามารถเปลี่ยน URL ได้โดยไม่ต้องรีเฟรชหน้า
เมื่อเทียบกับการกระโดดไปยังหน้าต่างๆ AJAX สามารถกล่าวได้ว่าได้ปรับปรุงประสบการณ์การท่องเว็บของผู้ใช้อย่างมาก เป็นที่น่าพอใจมากที่จะไม่เห็นหน้าจอสีขาวระหว่างการสลับหน้า อย่างไรก็ตามแอปพลิเคชัน AJAX ก่อนหน้านี้หลายคนไม่สนับสนุนการเคลื่อนไหวไปข้างหน้าและย้อนกลับของเบราว์เซอร์ซึ่งทำให้ผู้ใช้กลับไปยังตำแหน่งเดิมทันทีไม่ว่าพวกเขาจะเรียกดูเว็บไซต์และผู้ใช้ไม่สามารถเปลี่ยนประวัติการเรียกดูผ่านปุ่มการเคลื่อนไหวไปข้างหน้าและย้อนกลับของเบราว์เซอร์
สำหรับปัญหาแรกมันค่อนข้างง่ายที่จะแก้ไข เพียงใช้คุกกี้หรือ LocalStorage เพื่อบันทึกสถานะแอปพลิเคชัน อ่านสถานะนี้เมื่อรีเฟรชหน้าแล้วส่งคำขอ AJAX ที่เกี่ยวข้องเพื่อเปลี่ยนหน้า แต่ปัญหาที่สองนั้นลำบากมากมาพูดคุยเกี่ยวกับวิธีการแก้ปัญหาของเบราว์เซอร์ที่ทันสมัยก่อน
โซลูชัน HTML5
เพื่อให้เข้าใจว่า HTML5 สามารถก้าวไปข้างหน้าและย้อนกลับได้อย่างไรคุณต้องเข้าใจวัตถุประวัติศาสตร์และวัตถุที่ตั้งก่อน
วัตถุประวัติศาสตร์
คุณสมบัติวัตถุประวัติศาสตร์
1. ความยาว: ส่งคืนจำนวน URL ในรายการประวัติเบราว์เซอร์ สำหรับแต่ละหน้าว่าผู้ใช้เข้าชมแท็กปัจจุบันหมายเลขนี้จะถูกเพิ่มโดย 1 เนื่องจากเหตุผลด้านความเป็นส่วนตัวเนื้อหา URL ที่เฉพาะเจาะจงจะไม่สามารถมองเห็นได้
2. State: วัตถุที่เกี่ยวข้องกับ URL ปัจจุบันสามารถเพิ่มหรือแก้ไขได้ผ่าน pushstate และ replacEstate เท่านั้น เราสามารถใช้เพื่อจัดเก็บข้อมูลที่เกี่ยวข้องกับ URL
วิธีวัตถุประวัติศาสตร์
1.history.back ()
วิธีนี้ไม่มีพารามิเตอร์ หลังจากทริกเกอร์มันจะกลับไปที่หน้าก่อนหน้าเรียกดูซึ่งเทียบเท่ากับการคลิกปุ่มย้อนกลับของเบราว์เซอร์
2.History.foreward ()
วิธีนี้ไม่มีพารามิเตอร์ หลังจากทริกเกอร์มันจะกลับไปที่หน้าคุณเรียกดูก่อนที่คุณจะเรียกดูซึ่งเทียบเท่ากับการคลิกปุ่มไปข้างหน้าของเบราว์เซอร์
3.History.Go (หมายเลข)
วิธีนี้ยอมรับพารามิเตอร์ตัวแปรรูปร่างประวัติ GO (-1) เทียบเท่ากับการสำรองหน้า, History.go (1) เทียบเท่ากับหน้าล่วงหน้า, History.go (0) จะรีเฟรชหน้าปัจจุบัน
4.History.PushState (สถานะ, ชื่อ, URL)
กุญแจสำคัญในการเปลี่ยน URL และไม่รีเฟรชหน้าคือมัน วิธีนี้จะเปลี่ยนตำแหน่ง. href ของหน้าปัจจุบันและแก้ไขประวัติปัจจุบันวัตถุรัฐ หลังจากการดำเนินการประวัติความยาวจะเพิ่มขึ้น 1 วิธีนี้ยอมรับพารามิเตอร์สามตัว
1. รัฐ: วัตถุที่เกี่ยวข้องกับ URL ปัจจุบัน
2.Title: ชื่อหน้า แต่เบราว์เซอร์ทั้งหมดไม่สนใจ ในการเปลี่ยนชื่อเรื่องคุณยังต้องใช้ document.title
3.URL: URL ที่มีโดเมนเดียวกับหน้าปัจจุบัน location.href จะกลายเป็นค่านี้
5.History.replacestate (สถานะ, ชื่อ, URL)
วิธีนี้เหมือนกับข้างต้น แต่จะไม่เปลี่ยนประวัติความยาว แต่จะแก้ไขเฉพาะประวัติ state และ location.href
โปรดทราบว่าพารามิเตอร์ที่สาม pushstate และ replaceState ไม่สามารถข้ามโดเมนและจะไม่เรียกเหตุการณ์ป๊อปสเตตของเบราว์เซอร์และเหตุการณ์ OnhashChange (ทดสอบภายใต้ Chrome33)
วัตถุตำแหน่ง
นอกเหนือจากการคลิกที่ปุ่มไปข้างหน้า/ย้อนกลับและเหตุการณ์ประวัติคุณยังสามารถเปลี่ยน URL ผ่านวิธีการตั้งและแก้ไขคุณสมบัติตำแหน่ง:
คุณสมบัติของวัตถุตำแหน่ง (อ่านและเขียน):
1.host: โดเมนชื่อ + หมายเลขพอร์ต
2.HostName: ชื่อโดเมน
3. พอร์ต: หมายเลขพอร์ต
4.protocol: โปรโตคอล
5.Href: เส้นทางเต็มรูปแบบ
6.Origin: โปรโตคอล + ชื่อโดเมน + พอร์ต
7.Hash: URL (แฮช) เริ่มต้นด้วยเครื่องหมายปอนด์ (#)
8. PathName: เอกสารเส้นทาง + ชื่อเอกสาร
9.Search :(?) เนื้อหาต่อไปนี้
คุณสามารถบรรลุวัตถุประสงค์ของการรีเฟรชโดยการเปลี่ยนตำแหน่ง. href หรือ location.hash
วิธีการของวัตถุตำแหน่ง:
1.ASSIGN: เปลี่ยนค่าของ URL และเพิ่ม URL ปัจจุบันเป็นประวัติความยาวจะเพิ่มขึ้นโดย 1. Location.assig ('#' + x) จะเปลี่ยน URL แต่จะไม่รีเฟรชหน้า
2. RELOAD: รีเฟรชหน้า
3. การแทนที่: เปลี่ยนค่าของ URL แต่ประวัติความยาวยังคงไม่เปลี่ยนแปลง วิธีการใช้งานเดียวกัน
เหตุการณ์ป๊อปสเตท
เมื่อ URL เปลี่ยนแปลงตัวอย่างเช่นหากผู้ใช้คลิกปุ่มไปข้างหน้า/ย้อนกลับประวัติความเป็นมา (n) (n ไม่เท่ากับ 0), location.hash = x (x ไม่เท่ากับตำแหน่งปัจจุบัน hash) จะกระตุ้นเหตุการณ์นี้ คุณสามารถใช้เพื่อตรวจสอบ URL เพื่อใช้ฟังก์ชั่นต่าง ๆ
การคัดลอกรหัสมีดังนี้:
window.onPopState = function () {
// ทำ sth
-
เหตุการณ์ OnhashChange
การเปลี่ยนค่าแฮชจะทริกเกอร์เหตุการณ์ป๊อปสเตตและทริกเกอร์เหตุการณ์ป๊อปสเตตจะไม่จำเป็นต้องกระตุ้นเหตุการณ์ OnHashChange หลังการทดสอบ:
1. การเปลี่ยนแปลงแฮช แต่ตำแหน่ง. pathname ยังคงไม่เปลี่ยนแปลงจะทำให้เกิดเหตุการณ์ onhashchange เช่น history.pushstate (",", '#abc');
2. ถ้าแฮชและตำแหน่ง. pathname เปลี่ยนไปด้วยกันมันจะไม่กระตุ้นเช่น history.pushstate (",", 'A#ABC');
วิธีเขียนเบราว์เซอร์เก่า
เบราว์เซอร์เก่าไม่รองรับ pushstate และ repracestate ดังนั้นวิธีการตรวจสอบการเปลี่ยนแปลง URL ผ่าน popstate (อันที่จริงมันไม่สนับสนุนวิธีนี้) จากนั้นคุณสามารถเปลี่ยนเนื้อหาที่อยู่เบื้องหลัง URL# เพื่อไม่ให้มีการรีเฟรช แต่พวกเขาไม่สนับสนุน OnHashChange ดังนั้นคุณจะไม่สนใจการเปลี่ยนแปลงใน URL (ยกเว้นว่าหน้าจะเลื่อนไปยังตำแหน่ง ID ที่สอดคล้องกันของหน้า) จากนั้นคุณสามารถใช้การเคลื่อนไหวที่ดีที่สุดเท่านั้น: โพลและ setInterval เพื่อฟังค่าของ URL แบบนี้:
การคัดลอกรหัสมีดังนี้:
var prevhash = window.location.hash;
var callback = function () {... }
window.setInterval (ฟังก์ชัน () {
if (window.location.hash! = prevhash) {
prevhash = window.location.hash;
การโทรกลับ (prevhash);
-
}, 100);
แน่นอนว่าการเขียนนี้น่าหงุดหงิดมาก หากคุณไม่พิจารณาคลิกที่แท็ก A พร้อม ID บนหน้าเพื่อเปลี่ยนแฮชคุณสามารถใช้รูปแบบการออกแบบเพื่อใช้ URL การตรวจสอบอย่างหรูหรา ตัวอย่างเช่นรูปแบบผู้สังเกตการณ์แบบคลาสสิกใช้คลาสเพื่อใช้งานฟังก์ชั่นของการเปลี่ยนแปลงแฮชและจากนั้นคลาสทั้งหมด (ผู้สังเกตการณ์) ที่ต้องการฟังการเปลี่ยนแปลงใน URL เพื่อสมัครรับคลาส (Observer) นี้
การคัดลอกรหัสมีดังนี้:
// เปลี่ยนคลาส URL
ฟังก์ชั่น urlchanger () {
var _this = this;
this.observers = [];
// เพิ่มผู้สังเกตการณ์
this.addobserver = function (obj) {... }
// ลบผู้สังเกตการณ์
this.deleteobserver = function (obj) {... }
// แจ้งผู้สังเกตการณ์
this._notifyobServers = function () {
var length = _this.observers.length;
console.log (ความยาว)
สำหรับ (var i = 0; i <length; i ++) {
_this.observers [i] .Update ();
-
-
// เปลี่ยน URL
this.changeUrl = ฟังก์ชั่น (แฮช) {
window.location.hash = แฮช;
_This._NotifyObServers ();
-
-
// เรียนฟัง
ฟังก์ชั่น OneOfobServers () {
var _this = this;
this.update = function () {... }
-
//ทำให้สำเร็จ
var o1 = urlchanger ใหม่ ();
var O2 = ใหม่ OneOfobServers ();
o1.addobserver (O2);
o1.changeurl ('fun/arg1/arg2/');
// o2 ทำ sth ...