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 khi băm # nếu có thể.

Tôi chỉ cần thay đổi phần sau tên miền, vì vậy nó không giống như tôi vi phạm các 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ỉ bằng 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 history.pushState()và history.replaceState()các phương thức, 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');

Tìm hiểu thêm về điều này từ đây

Bạn cũng có thể sử dụng HTML5 thay thếState nếu bạn muốn thay đổi url nhưng không muốn thêm mục 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 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 qua từng hình ảnh bạn đã xem) trong khi cung cấp cho mỗi hình ảnh một url duy nhất của riêng mình.

Đây là giải pháp của tôi (newUrl là URL mới 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ể như có thể được nhìn 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 tải lại trang. URL đại diện cho những gì trang được tải cuối cùng là. 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 web www.mysite.comtrông giống như trang đăng nhập ngân hàng. Sau đó, bạn thay đổi thanh URL 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 và HTML5 hiện đại , có một phương thức được gọi pushStatetrên cửa sổ 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ẽ lấy 3 tham số, 1) tiêu đề đối tượng trạng thái 2) 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 đang 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, có history.replaceState()những thứ thực hiện chính xác đ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 cái mới!

Ngoài ra, bạn có thể tạo một chức năng để kiểm tra nếu history.pushStatetồn tại, sau đó tiếp tục với phần còn lại như thế này:

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 #cho <HTML5 browsers, mà không load lại trang. Đó là cách Angular sử dụng để làm SPA theo hashtag ...

Thay đổi #là khá dễ dàng, làm như:

window.location.hash = "example";

Và bạn có thể phát hiện ra 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 đề cập bởi Vivart và Geo1701. 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 bao bọc 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 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 history.pushState(page, caption, replace_url)rằng 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 / 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 cứ điều gì khác, thì bạn có thể làm điều này trong hai các bộ phận; bạn sử dụng location.hash đã thảo luận ở trên và sau đó thực hiện kiểm tra trên trang chủ, để tìm URL có neo 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 hàm 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 nó

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 đó, đi đến www.site.com/#/section/page/6

5) Mã 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ư thế này:

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

Hy vọng rằng 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');

Mọi thay đổi 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 đoạn URL. Nếu bạn thay đổi URL, bạn thay đổi URL.

Sử dụng các kỹ thuật viết 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 đang sử dụng.

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

Tôi chỉ cần thêm một thẻ neo và sau đó là một phần của trang 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ư Thomas Stjernegaard Jeppesen đã chỉ ra, 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 và đa trình duyệt. Bây giờ nó có thể được sử dụng để quản lý các trạng thái lịch sử trong các trình duyệt tuân thủ HTML5 cũng như trong nhiều trình duyệt chỉ có HTML4. Trong bản demo này, bạn có thể thấy một ví dụ về cách thức hoạt động của nó (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 mã nguồn của trang demo: bạn sẽ thấy nó rất dễ thực hiện.

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

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.

Bạn có thể sử dụng chức năng đẹp và đơn giản này để mọi nơi trên ứng dụng của bạn.

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ó.

Khá hữu ích cho mọi người.