Câu hỏi 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 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

1810
2018-05-05 10:54


gốc


Bạn có thể làm điều này trong Flash. Bạn chỉ cần một ứng dụng nền nhỏ và chuyển JavaScript của bạn sang flash để sửa đổi thanh vị trí. - Nick Berardi
Chỉ để làm cho nó dễ dàng hơn để hiểu câu hỏi, đây là những gì Facebook hiện khi bạn mở một bức ảnh, ví dụ. Thanh url thay đổi thành điểm TRỰC TIẾP thành ảnh đó, vì vậy bạn có thể chia sẻ URL mà không làm mất vị trí của bạn trên trang web. Hãy nhớ các trang web dựa trên khung thập niên vừa qua? Bạn chỉ có thể nhận được url trang chủ, bởi vì chỉ có khung nội bộ đang thay đổi. Và điều đó thật khủng khiếp. - Spidey


Các câu trả lời:


Điều này có thể được thực hiện trong Chrome, Safari, FF4 + và IE10pp4 +!

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 / tiến lên:

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

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


1633
2017-07-28 15:30



Làm thế nào để facebook làm điều đó trong IE7 sau đó? - Dominic Tobias
@CHiRiLo kiểm tra history.js cung cấp dự phòng cho các trình duyệt không hỗ trợ API lịch sử HTML5. - David Murdoch
@infensus Nếu có dấu # trong URL ở đâu đó, mẹo đó đã tồn tại năm.. - Izkata
Phần "pp4 +" của "IE10pp4 +" có nghĩa là gì? - Scott David Tesler
xem trước nền tảng 4 - David Murdoch


HTML5 đã giới thiệu history.pushState() và history.replaceState() phương pháp, 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


382
2017-08-17 13:59



Có thể không hoạt động trên file:/// vì lý do an toàn, ví dụ: Firefox 30. Kiểm tra trên localhost với python -m SimpleHTTPServer. - Ciro Santilli 新疆改造中心 六四事件 法轮功
Tôi đã sử dụng điều này trên codeigniter. - jned29
Tham số đầu tiên được mong đợi là một đối tượng, không chỉ là một chuỗi. - Alexis Wilke
IMO này thực sự là câu trả lời tốt nhất. Nếu tất cả những gì bạn muốn làm là cập nhật URL hiện tại ({}, null, strNewPath) là tất cả những gì bạn cần làm. Tốt nhất để kiểm tra trước tiên nếu (history.pushState) {} - Craig Jacobs
bạn chỉ có thể nhập null cho 2 tham số đầu tiên nếu bạn không muốn thay đổi chúng. Bạn cũng có thể sử dụng một url tuyệt đối cho tham số thứ ba. - Andrew


LƯU Ý: Nếu bạn đang làm việc với một HTML5 trình duyệt thì bạn nên bỏ qua câu trả lời này. Điều này bây giờ có thể 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 lần cuối là gì. Nếu bạn thay đổi nó (document.location) sau đó nó sẽ tải lại trang.

Một lý do rõ ràng là, bạn viết một trang web trên www.mysite.com trông giống như 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ọ thực sự đang xem xét www.mysite.com.


96
2018-05-05 10:57



Tôi không muốn thay đổi tên miền, chỉ có đường dẫn và tên tệp. - Robinicks
Điều này vẫn không ngăn chặn rủi ro bảo mật tiềm ẩn vì trình duyệt không có ý tưởng rằng tên miền / mysite và tên miền / othersite đều được coi là "an toàn" bởi người dùng. Có lẽ câu hỏi nên là lý do tại sao bạn muốn thay đổi URL? Nếu nó che khuất nó khỏi người dùng, bạn có thể chỉ cần chạy ứng dụng của mình trong iframe. - Robin Day
Bạn thực sự có thể làm điều này với Flash. Nó sẽ cho phép bạn sửa đổi URL mà không cần thực hiện yêu cầu. Điều này là có thể vì Flash hoạt động bên ngoài trình duyệt, nhưng rất chặt chẽ với nó. - Nick Berardi
Tôi phải nói rằng có những lý do hoàn toàn hợp lệ để muốn sửa đổi URL trong thanh địa chỉ phía máy khách. Ví dụ, nếu bạn có một bảng dữ liệu với phân trang, sắp xếp và lọc, và muốn những thứ đó được hỗ trợ Ajax, nhưng vẫn cập nhật URL sao cho trạng thái hiện tại của trang có thể đánh dấu được. Tôi có thể hiểu các rủi ro bảo mật với việc sửa đổi tên miền (lừa đảo vv), nhưng tại sao các trình duyệt không cho phép một phần của URL ở bên phải của miền cấp cao nhất có thể sửa đổi được thông qua tập lệnh? - Sunday Ironfoot
câu trả lời này không còn đúng 100% nữa. Xem câu trả lời của tôi để biết chi tiết. - David Murdoch


Bạn cũng có thể sử dụng HTML5 replaceState nếu bạn 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 nút quay lại. Điều này có thể được yêu cầu trong một số trường hợp như thư viện ảnh (nơi bạn muốn nút quay lại quay lại trang chỉ mục thư viện thay vì di chuyển qua 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ó.


93
2017-11-19 10:32





parent.location.hash = "hello";

73
2018-05-13 22:14



Tôi muốn thay đổi URL, không chỉ băm - #mydata - Robinicks
Thay đổi băm có thể hữu ích trong ajax vì nó là một loại trạng thái không sử dụng cookie, có thể đánh dấu và tương thích với các nút quay lại của trình duyệt. Gmail sử dụng điều này ngày nay để làm cho trình duyệt trở nên thân thiện hơn. - Matthew Lock
@ Jarvis: sự khác biệt là gì? - noisy
@noisy Theo dõi phía máy chủ không thể thấy băm trừ khi được gửi đến dịch vụ theo dõi một cách rõ ràng. - RedYetiCo
điều này không hữu ích nếu bạn đang sử dụng một khuôn khổ mvc tuyến đường trên băm, ví dụ như xương sống. - catbadger


Đâ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ế hiện tại)

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

45
2018-06-10 18:25



Tốt nhất để kiểm tra đầu tiên với if (history.pushState) {} Chỉ trong trường hợp trình duyệt cũ. - Craig Jacobs
Điều này không làm việc nhiều hơn bạn sẽ nhận được trong Firefox: Các hoạt động không an toàn. - kkatusic


HTML5 replaceState là câu trả lời, như đã đề 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 kết thúc các tính năng của trạng thái HTML5 và cung cấp hỗ trợ bổ sung cho các trình duyệt HTML4.


25
2017-11-21 11:09





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) không nên tải lại trang của bạn.


20
2018-01-24 08:49



Vấn đề với history.pushState(..) là, nếu bạn muốn chuyển hướng đến một tên miền khác, chính sách tên miền chéo sẽ có hiệu lực. Trong khi với window.location.replace(..)chuyển hướng đến một tên miền khác là có thể. - OSWorX


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ẻ và bạn không cần URL chính xác và bạn không sử dụng neo băm cho bất kỳ đ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 một URL có một 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 băm). Giả sử bạn đã tải nội dung chính xác cho trang 6 vào trang, do đó, ngoài việc băm người dùng không quá bị xáo trộn.

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

4) Người khác hoặc cùng một người dùng vào một ngày sau đó, chuyển đến 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ư 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.


18
2018-04-19 11:43