ฉันจะแก้ไข URL โดยไม่ต้องโหลดหน้าซ้ำได้อย่างไร

มีวิธีที่ฉันสามารถแก้ไข URL ของหน้าปัจจุบันโดยไม่ต้องโหลดหน้าใหม่หรือไม่?

ฉันต้องการเข้าถึงส่วนก่อนแฮช # ถ้าเป็นไปได้

ฉันต้องการเปลี่ยนส่วนหลังโดเมนเท่านั้นจึงไม่ใช่ว่าฉันละเมิดนโยบายข้ามโดเมน

 window.location.href = "www.mysite.com/page2.php";  // Sadly this reloads

สิ่งนี้สามารถทำได้ใน Chrome, Safari, Firefox 4+ และ Internet Explorer 10pp4 +!

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

ตัวอย่าง:

 function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

จากนั้นคุณสามารถใช้window.onpopstateเพื่อตรวจจับการนำทางปุ่มย้อนกลับ / ไปข้างหน้า:

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

สำหรับการมองในเชิงลึกมากกว่าที่ประวัติเบราเซอร์จัดการดูบทความ MDN นี้

HTML5 แนะนำhistory.pushState()และhistory.replaceState()วิธีการที่ช่วยให้คุณสามารถเพิ่มและแก้ไขรายการประวัติตามลำดับ

window.history.pushState('page2', 'Title', '/page2.php');

อ่านเพิ่มเติมเกี่ยวกับเรื่องนี้ได้จากที่นี่

คุณยังสามารถใช้ HTML5 replaceStateหากคุณต้องการเปลี่ยน URL แต่ไม่ต้องการเพิ่มรายการในประวัติเบราว์เซอร์:

if (window.history.replaceState) {
   //prevents browser from storing history with each change:
   window.history.replaceState(statedata, title, url);
}

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

นี่คือโซลูชันของฉัน (newUrl เป็น URL ใหม่ของคุณซึ่งคุณต้องการแทนที่ด้วย URL ปัจจุบัน):

history.pushState({}, null, newUrl);

หมายเหตุ: หากคุณทำงานกับเบราว์เซอร์ HTML5 คุณควรละเว้นคำตอบนี้ ตอนนี้เป็นไปได้ที่สามารถเห็นได้ในคำตอบอื่น ๆ

ไม่มีวิธีแก้ไขURLในเบราว์เซอร์โดยไม่ต้องโหลดหน้าซ้ำ URL แสดงถึงหน้าที่โหลดครั้งสุดท้าย ถ้าคุณเปลี่ยนมัน (document.location ) จากนั้นมันจะโหลดหน้าเว็บอีกครั้ง

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

parent.location.hash = "hello";

ในปัจจุบันเบราว์เซอร์และ HTML5มีวิธีการที่เรียกว่าบนหน้าต่างpushState historyสิ่งนี้จะเปลี่ยน URL และผลักดันไปที่ประวัติโดยไม่ต้องโหลดหน้าเว็บ

คุณสามารถใช้มันเช่นนี้มันจะใช้เวลา 3 พารามิเตอร์ 1) สถานะวัตถุ 2) ชื่อและ URL):

window.history.pushState({page: "another"}, "another page", "example.html");

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

นอกจากนี้ยังมีสิ่งhistory.replaceState()ที่ทำสิ่งเดียวกันยกเว้นว่าจะแก้ไขประวัติปัจจุบันแทนที่จะสร้างใหม่!

นอกจากนี้คุณสามารถสร้างฟังก์ชั่นเพื่อตรวจสอบว่าhistory.pushStateมีอยู่หรือไม่แล้วดำเนินการกับส่วนที่เหลือดังนี้:

function goTo(page, title, url) {
  if ("undefined" !== typeof history.pushState) {
    history.pushState({page: page}, title, url);
  } else {
    window.location.assign(url);
  }
}

goTo("another page", "example", 'example.html');

นอกจากนี้คุณสามารถเปลี่ยน#สำหรับ<HTML5 browsersซึ่งจะไม่โหลดหน้าเว็บอีกครั้ง นั่นคือวิธีที่แองกูลาร์ใช้ทำสปาตามแฮชแท็ก ...

การเปลี่ยน#เป็นเรื่องง่ายทำเช่น:

window.location.hash = "example";

และคุณสามารถตรวจจับได้ดังนี้:

window.onhashchange = function () {
  console.log("#changed", window.location.hash);
}

HTML5 replaceState เป็นคำตอบดังที่ Vivart และ geo1701 พูดถึงแล้ว อย่างไรก็ตามเบราว์เซอร์ / รุ่นทั้งหมดไม่รองรับ History.jsล้อมรอบคุณสมบัติรัฐ HTML5 และให้การสนับสนุนเพิ่มเติมสำหรับเบราว์เซอร์ HTML4

ก่อน HTML5 เราสามารถใช้:

parent.location.hash = "hello";

และ:

window.location.replace("http:www.example.com");

วิธีนี้จะโหลดหน้าของคุณใหม่ แต่ HTML5 แนะนำสิ่งhistory.pushState(page, caption, replace_url)ที่ไม่ควรโหลดหน้าเว็บของคุณ

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

ตัวอย่างเช่น

1) ผู้ใช้เปิดอยู่ www.site.com/section/page/4

2) ผู้ใช้ดำเนินการบางอย่างซึ่งเปลี่ยน URL เป็นwww.site.com/#/section/page/6(พร้อมแฮช) สมมติว่าคุณโหลดเนื้อหาที่ถูกต้องสำหรับหน้า 6 ลงในหน้านอกเหนือจากการแฮชผู้ใช้จะไม่ถูกรบกวนมากเกินไป

3) ผู้ใช้ส่ง URL นี้ไปให้คนอื่นหรือคั่นหน้าไว้

4) บุคคลอื่นหรือผู้ใช้คนเดียวกันในภายหลังจะไปที่ www.site.com/#/section/page/6

5) โค้ดในการwww.site.com/เปลี่ยนเส้นทางผู้ใช้ไปยังwww.site.com/section/page/6โดยใช้สิ่งนี้:

if (window.location.hash.length > 0){ 
   window.location = window.location.hash.substring(1);
}

หวังว่ามันสมเหตุสมผล! มันเป็นแนวทางที่มีประโยชน์สำหรับบางสถานการณ์

ด้านล่างเป็นฟังก์ชันในการเปลี่ยน URL โดยไม่ต้องโหลดหน้าซ้ำ รองรับ HTML5 เท่านั้น

  function ChangeUrl(page, url) {
        if (typeof (history.pushState) != "undefined") {
            var obj = {Page: page, Url: url};
            history.pushState(obj, obj.Page, obj.Url);
        } else {
            window.location.href = "homePage";
            // alert("Browser does not support HTML5.");
        }
    }

  ChangeUrl('Page1', 'homePage');

การเปลี่ยนแปลงใด ๆ ของ loction (อย่างใดอย่างหนึ่งwindow.locationหรือdocument.location ) จะทำให้เกิดการร้องขอใน URL ใหม่นั้นหากคุณไม่ได้เพียงแค่เปลี่ยนส่วนย่อยของ URL หากคุณเปลี่ยน URL คุณจะเปลี่ยน URL

ใช้เทคนิคการเขียน URL ฝั่งเซิร์ฟเวอร์เช่นmod_rewrite ของ Apacheหากคุณไม่ชอบ URL ที่คุณใช้อยู่ในปัจจุบัน

คุณสามารถเพิ่มสมอแท็ก ฉันใช้สิ่งนี้บนเว็บไซต์ของฉันเพื่อให้สามารถติดตามด้วย Google Analytics สิ่งที่ผู้คนกำลังเยี่ยมชมบนหน้า

ฉันเพิ่งเพิ่มสมอแท็กแล้วส่วนของหน้าฉันต้องการติดตาม:

var trackCode = "/#" + urlencode($("myDiv").text());
window.location.href = "http://www.piano-chords.net" + trackCode;
pageTracker._trackPageview(trackCode);

ตามที่ Thomas Stjernegaard Jeppesen ชี้ให้เห็นคุณสามารถใช้History.jsเพื่อแก้ไขพารามิเตอร์ URL ในขณะที่ผู้ใช้นำทางผ่านลิงก์ Ajax และแอพของคุณ

เกือบหนึ่งปีผ่านไปแล้วตั้งแต่คำตอบนั้น History.js เติบโตขึ้นและมีความเสถียรและข้ามเบราว์เซอร์มากขึ้น ตอนนี้มันสามารถใช้เพื่อจัดการสถานะประวัติใน HTML5- ที่สอดคล้องกับในเบราว์เซอร์ HTML4-only เท่านั้น ในตัวอย่างนี้คุณสามารถดูตัวอย่างของการทำงาน (รวมถึงความสามารถในการลองใช้ฟังก์ชันและขีด จำกัด ของมัน

หากคุณต้องการความช่วยเหลือในการใช้และนำไลบรารี่นี้มาใช้ฉันขอแนะนำให้คุณดูซอร์สโค้ดของหน้าตัวอย่าง: คุณจะเห็นว่ามันง่ายมากที่จะทำ

ในที่สุดสำหรับคำอธิบายที่ครอบคลุมเกี่ยวกับสิ่งที่อาจเป็นปัญหาเกี่ยวกับการใช้แฮช (และ hashbangs) ตรวจสอบลิงค์นี้โดย Benjamin Lupton

ใช้history.pushState()จาก API ประวัติ HTML 5

อ้างอิงAPI ประวัติ HTML5สำหรับรายละเอียดเพิ่มเติม

คุณสามารถใช้ฟังก์ชั่นที่สวยงามและเรียบง่ายนี้ได้ทุกที่ในแอปพลิเคชันของคุณ

function changeurl(url, title) {
    var new_url = '/' + url;
    window.history.pushState('data', 'Title', new_url);
    document.title = title;
}

คุณไม่สามารถแก้ไข URL เท่านั้น แต่คุณสามารถอัปเดตชื่อพร้อมกับได้

ค่อนข้างเป็นประโยชน์ทุกคน