Làm cách nào để sửa đổi URL mà không cần tải lại trang?

Có cách nào tôi có thể sửa đổi URL của trang hiện tại mà không cần tải lại trang không?

Tôi muốn truy cập phần trước # băm nếu có thể.

Tôi chỉ cần thay đổi phần sau tên miền, vì vậy, không giống như tôi đang vi phạm chính sách tên miền chéo.

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

Điều này hiện có thể được thực hiện trong Chrome, Safari, Firefox 4+ và Internet Explorer 10pp4 +!

Xem câu trả lời của câu hỏi này để biết thêm thông tin: Cập nhật thanh địa chỉ với URL mới mà không cần băm hoặc tải lại trang

Thí dụ:

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

Sau đó, bạn có thể sử dụng window.onpopstateđể phát hiện điều hướng nút quay lại / chuyển tiếp:

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

Để có cái nhìn sâu hơn về thao tác lịch sử trình duyệt, hãy xem bài viết MDN này .

HTML5 đã giới thiệu các phương thức history.pushState()và history.replaceState(), cho phép bạn thêm và sửa đổi các mục lịch sử tương ứng.

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

Đọc thêm về điều này từ đây

Bạn cũng có thể sử dụng HTML5 ReplaceState nếu muốn thay đổi url nhưng không muốn thêm mục nhập vào lịch sử trình duyệt:

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

Điều này sẽ 'phá vỡ' chức năng của nút quay lại. Điều này có thể được yêu cầu trong một số trường hợp chẳng hạn như thư viện hình ảnh (nơi bạn muốn nút quay lại quay lại trang chỉ mục thư viện thay vì quay lại từng hình ảnh bạn đã xem) trong khi cung cấp cho mỗi hình ảnh url duy nhất của riêng nó.

Đây là giải pháp của tôi (newUrl là URL mới của bạn mà bạn muốn thay thế bằng URL hiện tại):

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

LƯU Ý: Nếu bạn đang làm việc với trình duyệt HTML5 thì bạn nên bỏ qua câu trả lời này. Điều này bây giờ có thể thực hiện được như có thể thấy trong các câu trả lời khác.

Không có cách nào để sửa đổi URL trong trình duyệt mà không cần tải lại trang. URL đại diện cho trang được tải cuối cùng. Nếu bạn thay đổi nó ( document.location) thì nó sẽ tải lại trang.

Một lý do rõ ràng là bạn viết một trang trên www.mysite.comđó trông giống như một trang đăng nhập ngân hàng. Sau đó, bạn thay đổi thanh URL của trình duyệt để nói www.mybank.com. Người dùng sẽ hoàn toàn không biết rằng họ đang thực sự nhìn vào www.mysite.com.

parent.location.hash = "hello";

Trong các trình duyệt hiện đại và HTML5 , có một phương thức được gọi pushStatetrên window history. Điều đó sẽ thay đổi URL và đẩy nó vào lịch sử mà không cần tải trang.

Bạn có thể sử dụng nó như thế này, nó sẽ có 3 tham số, 1) đối tượng trạng thái 2) tiêu đề và một URL):

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

Điều này sẽ thay đổi URL, nhưng không tải lại trang. Ngoài ra, nó không kiểm tra xem trang có tồn tại hay không, vì vậy nếu bạn thực hiện một số mã JavaScript phản ứng với URL, bạn có thể làm việc với chúng như thế này.

Ngoài ra, history.replaceState()nó thực hiện chính xác những điều tương tự, ngoại trừ nó sẽ sửa đổi lịch sử hiện tại thay vì tạo một lịch sử mới!

Ngoài ra, bạn có thể tạo một hàm để kiểm tra xem có history.pushStatetồn tại hay không, sau đó tiếp tục với phần còn lại như sau:

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

Ngoài ra, bạn có thể thay đổi #for <HTML5 browsers, điều này sẽ không tải lại trang. Đó là cách mà Angular sử dụng để làm SPA theo hashtag ...

Thay đổi #khá dễ dàng, thực hiện như:

window.location.hash = "example";

Và bạn có thể phát hiện nó như thế này:

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

Thay thế HTML5 là câu trả lời, như đã được Vivart và geo1701 đề cập. Tuy nhiên, nó không được hỗ trợ trong tất cả các trình duyệt / phiên bản. History.js kết hợp các tính năng trạng thái HTML5 và cung cấp hỗ trợ bổ sung cho các trình duyệt HTML4.

Trước khi có HTML5, chúng ta có thể sử dụng:

parent.location.hash = "hello";

và:

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

Phương pháp này sẽ tải lại trang của bạn, nhưng HTML5 đã giới thiệu phương pháp history.pushState(page, caption, replace_url)không nên tải lại trang của bạn.

Nếu những gì bạn đang cố gắng làm là cho phép người dùng đánh dấu trang / chia sẻ trang và bạn không cần nó phải là URL chính xác và bạn không sử dụng neo băm cho bất kỳ thứ gì khác, thì bạn có thể làm điều này trong hai cách. các bộ phận; bạn sử dụng location.hash đã thảo luận ở trên, sau đó thực hiện kiểm tra trên trang chủ, để tìm kiếm một URL có ký tự liên kết băm trong đó và chuyển hướng bạn đến kết quả tiếp theo.

Ví dụ:

1) Người dùng đang bật www.site.com/section/page/4

2) Người dùng thực hiện một số hành động thay đổi URL thành www.site.com/#/section/page/6(với hàm băm). Giả sử bạn đã tải đúng nội dung cho trang 6 vào trang, vì vậy ngoài phần băm, người dùng không quá băn khoăn.

3) Người dùng chuyển URL này cho người khác hoặc đánh dấu trang

4) Một người nào đó khác, hoặc cùng một người dùng vào một ngày sau đó, truy cập www.site.com/#/section/page/6

5) Mã trên www.site.com/chuyển hướng người dùng đến www.site.com/section/page/6, sử dụng một cái gì đó như sau:

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

Hy vọng điều đó có ý nghĩa! Đó là một cách tiếp cận hữu ích cho một số tình huống.

Dưới đây là chức năng thay đổi URL mà không cần tải lại trang. Nó chỉ được hỗ trợ cho 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');

Bất kỳ thay đổi nào của vị trí (hoặc window.locationhoặc document.location) sẽ gây ra yêu cầu trên URL mới đó, nếu bạn không chỉ thay đổi phân đoạn URL. Nếu bạn thay đổi URL, bạn thay đổi URL.

Sử dụng các kỹ thuật ghi lại URL phía máy chủ như mod_rewrite của Apache nếu bạn không thích các URL bạn hiện đang sử dụng.

Bạn có thể thêm các thẻ liên kết. Tôi sử dụng điều này trên trang web của mình để tôi có thể theo dõi bằng Google Analytics những gì mọi người đang truy cập trên trang.

Tôi chỉ thêm một thẻ liên kết và sau đó là một phần của trang mà tôi muốn theo dõi:

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

Như đã chỉ ra bởi Thomas Stjernegaard Jeppesen, bạn có thể sử dụng History.js để sửa đổi các tham số URL trong khi người dùng điều hướng qua các liên kết và ứng dụng Ajax của bạn.

Đã gần một năm trôi qua kể từ câu trả lời đó, và History.js đã phát triển và trở nên ổn định hơn cũng như trên nhiều trình duyệt. Giờ đây, nó có thể được sử dụng để quản lý trạng thái lịch sử trong tuân thủ HTML5 cũng như trong nhiều trình duyệt chỉ HTML4. Trong bản trình diễn này Bạn có thể xem một ví dụ về cách nó hoạt động (cũng như có thể thử các chức năng và giới hạn của nó.

Nếu bạn cần bất kỳ trợ giúp nào về cách sử dụng và triển khai thư viện này, tôi khuyên bạn nên xem qua mã nguồn của trang demo: bạn sẽ thấy nó rất dễ thực hiện.

Cuối cùng, để có lời giải thích toàn diện về những vấn đề có thể xảy ra khi sử dụng hàm băm (và mã băm), hãy xem liên kết này của Benjamin Lupton.

Bạn có thể sử dụng chức năng đơn giản và đẹp mắt này ở bất cứ đâu trên ứng dụng của mình.

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

Bạn không chỉ có thể chỉnh sửa URL mà còn có thể cập nhật tiêu đề cùng với nó.

Rất hữu ích cho mọi người.

Sử dụng history.pushState()từ API lịch sử HTML 5.

Tham khảo API lịch sử HTML5 để biết thêm chi tiết.

Url mới của bạn.

let newUrlIS =  window.location.origin + '/user/profile/management';

Theo một nghĩa nào đó, việc gọi pushState () tương tự như đặt window.location = "#foo", trong đó cả hai cũng sẽ tạo và kích hoạt một mục lịch sử khác được liên kết với tài liệu hiện tại. Nhưng pushState () có một số ưu điểm:

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

Đây là tất cả những gì bạn cần để điều hướng mà không cần tải lại

// add setting without reload 
location.hash = "setting";

// if url change with hash do somthing
window.addEventListener('hashchange', () => {
    console.log('url hash changed!');
});

// if url change do somthing (dont detect changes with hash)
//window.addEventListener('locationchange', function(){
//    console.log('url changed!');
//})


// remove #setting without reload 

history.back();