การอัปเดตแถบที่อยู่ด้วย URL ใหม่โดยไม่ต้องแฮชหรือโหลดซ้ำหน้าเว็บ

643

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

อย่างไรก็ตามฉันไม่พบบทความที่ฉันคิดฉันอ่าน

ฉันบ้าหรือมีวิธีการทำเช่นนี้ (ใน Chrome) หรือไม่

ป.ล. ฉันไม่ได้พูดถึง window.location.hash, et al. หากมีอยู่ข้างต้นคำตอบสำหรับคำถามนี้จะไม่เป็นจริง

javascript ajax google-chrome

— เดวิดเมอร์ด็อก
แหล่งที่มา

3

มีความเป็นไปได้ที่ซ้ำกันของการปรับเปลี่ยน URL โดยไม่ต้องโหลดหน้าซ้ำ

— Tobias Kienzler

1

@tobiaskienzler เมื่อคำถามนั้นถูกถามกลับไปในปี 2009 มันเป็นไปไม่ได้

— David Murdoch

3

ไม่แน่นอน แต่ตอนนี้มันเป็นคำถามที่ถามเหมือนกัน เป็นเรื่องน่าละอายที่คนอื่น ๆ ยอมรับคำตอบที่ล้าสมัย (โดยคุณฉันสังเกตเห็น) ... คุณรู้อะไรไหม ลองหลอกดูใกล้ ๆ กันไม่มีใครบอกว่า "ต้นฉบับ" ต้องเป็นอันที่เก่ากว่าอันที่จริงมีทำนองก่อนหน้านี้

— Tobias Kienzler

@tobiaskienzler คำถามอื่น ๆ ไม่มีคำตอบที่ยอมรับแล้ว

— David Murdoch

2

@TobiasKienzler เป็นคำถามอายุ 6 ปีทำไมคุณต้องกังวลกับคำถามนี้ เพียงแค่สนุกกับคำตอบที่น่าทึ่งและนำไปใช้กับแอปพลิเคชันของคุณ เป็นเวลา 6 ปีที่ผู้ใช้งาน SO หลายพันคนเห็นว่าเป็นคำถามที่น่าอัศจรรย์มาก

— อิหม่าม Assidiqqi

874

ตอนนี้คุณสามารถทำได้ในเบราว์เซอร์ "ทันสมัย" ส่วนใหญ่!

นี่คือบทความต้นฉบับที่ฉันอ่าน (โพสต์เมื่อ 10 กรกฎาคม 2010): HTML5: การเปลี่ยนเบราว์เซอร์ - URL โดยไม่ต้องรีเฟรชหน้าหน้าสดชื่น

สำหรับดูเพิ่มเติมในเชิงลึกใน pushState / replaceState / popstate (aka ประวัติ HTML5 API) ดูเอกสาร MDN

TL; DR คุณสามารถทำได้:

window.history.pushState("object or string", "Title", "/new-url");

ดูคำตอบของฉันเพื่อปรับเปลี่ยน URL โดยไม่ต้องโหลดหน้านี้ซ้ำสำหรับวิธีการพื้นฐาน

— เดวิดเมอร์ด็อก
แหล่งที่มา

3

อ่าหน้าที่การใช้งานอยู่ใน WebKit และลงจอดไม่กี่เดือนที่ผ่านมา < bugs.webkit.org/show_bug.cgi?id=36152 > ยินดีที่ได้พบ!

— เก่าแก่ที่สุดของชีวิตเด็กผู้ชาย

6

ตอนนี้ถูกใช้โดย github ในขณะที่การนำทางต้นไม้

— Valerij

1

@Vprimachenko: ใช่แล้ว และพวกเขาก็แบ่งปุ่มย้อนกลับของฉันออกเป็นระยะ ๆ

— David Murdoch

สิ่งนี้สามารถทำได้ใน Chrome, Safari, FF4 + และ IE10pp3 +! (จากคำตอบของ David Murdoch ถึง stackoverflow.com/questions/824349/… )

— Zach Lysobey

11

protip: คุณสามารถใช้เส้นทางญาติที่มีฟังก์ชั่นเหล่านี้เช่นกัน (เช่น../new-urlหรือ../../new-urlพวกเขาดูเหมือนจะทำในสิ่งที่คุณคาดหวังใน Chrome อย่างน้อย..

— Mahn

156

เปลี่ยนเฉพาะสิ่งที่อยู่หลังแฮชเบราว์เซอร์เก่า

document.location.hash = 'lookAtMeNow';

การเปลี่ยน URL แบบเต็ม Chrome, Firefox, IE10 +

history.pushState('data to be passed', 'Title of the page', '/test');

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

history.replaceState('data to be passed', 'Title of the page', '/test');

ลองใช้สิ่งเหล่านี้ในคอนโซลทันที!

— Pawel
แหล่งที่มา

13

replaceStateเป็นสิ่งที่ฉันต้องการจริงๆขอบคุณที่ขยายการตอบกลับดั้งเดิม

— Choylton B. Higginbottom

'โดเมนและโปรโตคอลต้องเหมือนกันกับต้นฉบับ!' วิธีนี้ป้องกันไม่ให้ไซต์การประมงบางแห่งเปลี่ยน url ของแถบที่อยู่

— Rick

3

คุณไม่ควรส่ง URL ที่แน่นอนไปยังฟังก์ชันนี้ หากคุณทำเช่นนั้นคุณอาจต้องสร้างมันแบบไดนามิกจากแบบแผนปัจจุบันโฮสต์และพอร์ต - ซึ่งเป็นงานจำนวนมากเมื่อคุณสามารถสร้าง URL แบบสัมพัทธ์ ("foo.html" หรือแม้กระทั่ง "/foo.html" ") และให้เบราว์เซอร์ดูแล

— DimeCadmium

1

@DimeCadmium การทำให้เข้าใจง่ายดี Updated

— Pawel

history.replaceStateเพิ่มลงในประวัติใน ff 66.0b1

— azzamsa

33

อัปเดตเป็นคำตอบของ Davids เพื่อตรวจจับแม้แต่เบราว์เซอร์ที่ไม่สนับสนุนสถานะต่อไปนี้

if (history.pushState) {
  window.history.pushState("object or string", "Title", "/new-url");
} else {
  document.location.href = "/new-url";
}

— metamagikum
แหล่งที่มา

9

document.location.href โหลดหน้านี้

— ซ้ำ

1

var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?foo=bar';
window.history.pushState({path:newurl},'',newurl);

— เควินเม็นเดส
แหล่งที่มา

3

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

— MaxiMouse

@ MaxiMouse ขอบคุณสำหรับความทุกข์ยากของคุณฉันจะคำนึงถึงมัน

— Kevin Mendez