Làm cách nào để chúng tôi cập nhật URL hoặc chuỗi truy vấn bằng javascript / jQuery mà không cần tải lại trang?

Có cách nào để cập nhật URL theo chương trình mà không cần tải lại trang không?

CHỈNH SỬA: Tôi đã thêm một cái gì đó vào tiêu đề trong bài đăng. Tôi chỉ muốn nói rõ rằng tôi không muốn tải lại trang

Đúng - document.location = "http://my.new.url.com"

Bạn cũng có thể lấy nó theo cùng một cách, ví dụ.

var myURL = document.location;
document.location = myURL + "?a=parameter";

Đối tượng vị trí cũng có một số thuộc tính hữu ích:

hash            Returns the anchor portion of a URL
host            Returns the hostname and port of a URL
hostname        Returns the hostname of a URL
href            Returns the entire URL
pathname        Returns the path name of a URL
port            Returns the port number the server uses for a URL
protocol        Returns the protocol of a URL
search          Returns the query portion of a URL

CHỈNH SỬA: Đặt băm của document.location sẽ không tải lại trang, chỉ thay đổi vị trí của tiêu điểm trên trang. Vì vậy, cập nhật đến #myIdsẽ cuộn đến phần tử với id="myId". Nếu idkhông tồn tại, tôi tin rằng sẽ không có gì xảy ra? (Cần xác nhận trên các trình duyệt khác nhau)

EDIT2: Để làm rõ hơn, không chỉ trong một nhận xét: Bạn không thể cập nhật toàn bộ URL bằng javascript mà không thay đổi trang, đây là một hạn chế bảo mật. Nếu không, bạn có thể nhấp vào một liên kết đến một trang ngẫu nhiên, được tạo ra để trông giống như gmail và ngay lập tức thay đổi URL thành www.gmail.com và lấy cắp thông tin đăng nhập của mọi người.
Bạn có thể thay đổi phần sau tên miền trên một số trình duyệt để đối phó với những thứ theo phong cách AJAX, nhưng phần đó đã được liên kết bởi Osiris. Hơn nữa, bạn có thể không nên làm điều này, ngay cả khi bạn có thể. URL cho người dùng biết họ đang ở đâu trên trang web của bạn. Nếu bạn thay đổi nó mà không thay đổi nội dung trang, nó sẽ trở nên hơi khó hiểu.

Có và không. Tất cả các trình duyệt web phổ biến đều có một biện pháp bảo mật để ngăn chặn điều đó. Mục đích là để ngăn mọi người tạo bản sao của các trang web, thay đổi URL để làm cho nó trông chính xác và sau đó có thể lừa mọi người và lấy thông tin của họ.

Tuy nhiên, một số trình duyệt web tương thích với HTML5 đã triển khai API Lịch sử có thể được sử dụng cho những thứ tương tự như những gì bạn muốn:

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

Tôi đã thử nghiệm, và nó hoạt động tốt. Nó không tải lại trang mà chỉ cho phép bạn thay đổi truy vấn URL. Bạn sẽ không thể thay đổi giao thức hoặc các giá trị máy chủ.

Để biết thêm thông tin:

http://diveintohtml5.info/history.html

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulation_the_browser_history

Bạn có thể dùng :

window.history.pushState('obj', 'newtitle', newUrlWithQueryString)

Sử dụng

window.history.replaceState ({}, document.title, updatedUri);

Để cập nhật Url mà không cần tải lại trang

 var url = window.location.href;
 var urlParts = url.split('?');
 if (urlParts.length > 0) {
     var baseUrl = urlParts[0];
     var queryString = urlParts[1];

     //update queryString in here...I have added a new string at the end in this example
     var updatedQueryString = queryString + 'this_is_the_new_url' 

     var updatedUri = baseUrl + '?' + updatedQueryString;
     window.history.replaceState({}, document.title, updatedUri);
 }

Để loại bỏ chuỗi truy vấn mà không cần tải lại trang

var url = window.location.href;
if (url.indexOf("?") > 0) {
     var updatedUri = url.substring(0, url.indexOf("?"));
     window.history.replaceState({}, document.title, updatedUri);
}

Đúng

document.location là cách bình thường.

Tuy nhiên document.location cũng giống như window.location, ngoại trừ window.location được hỗ trợ nhiều hơn một chút trong các trình duyệt cũ nên có thể là lựa chọn có thể xem trước.

Kiểm tra chủ đề này trên SO để biết thêm thông tin:

Sự khác biệt giữa window.location và document.location trong JavaScript là gì?

Xác định đối tượng URL mới, gán cho nó url hiện tại, nối (các) tham số của bạn vào đối tượng URL đó và cuối cùng đẩy nó đến trạng thái trình duyệt của bạn.

var url = new URL(window.location.href);
//var url = new URL(window.location.origin + window.location.pathname) <- flush existing parameters
url.searchParams.append("order", orderId);
window.history.pushState(null, null, url);

Tiền tố URL thay đổi bằng thẻ bắt đầu bằng # để tránh chuyển hướng.

Điều này chuyển hướng

location.href += '&test='true';

Điều này không chuyển hướng

location.href += '#&test='true';

Javascript đơn giản: document.location = 'http://www.google.com';

Tuy nhiên, điều này sẽ khiến trình duyệt làm mới - hãy cân nhắc sử dụng hàm băm nếu bạn cần cập nhật URL để triển khai một số loại lịch sử duyệt web mà không cần tải lại trang. Bạn có thể muốn xem xét jQuery.hashchange nếu trường hợp này xảy ra.

Bạn sẽ cần phải cụ thể hơn. Ý bạn là gì khi 'cập nhật URL'? Nó có thể có nghĩa là tự động điều hướng đến một trang khác, điều này chắc chắn là có thể.

Nếu bạn chỉ muốn cập nhật nội dung của thanh địa chỉ mà không cần tải lại trang, hãy xem Sửa đổi URL mà không cần tải lại trang

Có - document.location.hashcho các truy vấn