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

2519
Robin Rodricks 2009-05-06 00:54.

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

18 answers

2125
David Murdoch 2010-07-29 05:30.

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

644
Vivart 2010-08-18 03:59.

HTML5 đã giới thiệu các phương thức history.pushState()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

144
George Filippakos 2012-11-20 00:32.

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

132
Haimei 2015-06-11 08:25.

Đâ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);
112
Robin Day 2009-05-06 00:57.

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.

87
Noname 2009-05-14 12:14.
parent.location.hash = "hello";
31
Alireza 2017-07-02 22:03.

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);
}
26

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.

24
Shine 2014-01-24 22:49.

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.

23
Jeremy Warne 2011-04-20 01:43.

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.

17
Suraj 2015-10-27 22:33.

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');
13
Gumbo 2009-05-06 00:58.

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.

11
Nate 2009-12-14 12:57.

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);
9
Erenor Paz 2013-09-06 03:55.

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.

9
Dheeraj Thedijje 2019-11-29 23:48.

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.

8
Prathamesh Rasam 2015-08-16 01:55.

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.

5
Vinay Kaithwas 2020-07-18 20:34.

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);
0
Omar bakhsh 2020-06-10 13:07.

Đâ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();

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Làm thế nào để xây dựng một quả địa cầu từ Scratch

Làm thế nào để xây dựng một quả địa cầu từ Scratch

Thời gian, sự kiên nhẫn, thời gian, sự cống hiến và thời gian chỉ là một vài trong số những thứ mà Peter Bellerby cần để thành lập và sau đó điều hành Bellerby & Co. Globemakers, một trong những công ty duy nhất trên Trái đất vẫn sản xuất các quả địa cầu bằng tay.

Năm giai đoạn đau buồn sau khi mất việc làm

Năm giai đoạn đau buồn sau khi mất việc làm

Đó là một ngày thứ Bảy, máy bay của tôi hạ cánh, và tôi đã sẵn sàng để thư giãn trong một kỳ nghỉ cuối tuần ngắn ngủi, khi một email đến trên điện thoại của tôi. Tôi đã mất việc.

Giữ an toàn cho danh tính của bạn với một cảnh báo đóng băng hoặc gian lận tín dụng

Giữ an toàn cho danh tính của bạn với một cảnh báo đóng băng hoặc gian lận tín dụng

Nếu bạn đã từng bị đánh cắp danh tính của mình, bạn biết đó là một trải nghiệm đáng sợ và căng thẳng. Một cách không phổ biến để ngăn chặn nó? Tín dụng bị đóng băng.

Buổi ra mắt phần 3 của The Good Place có một học sinh mới: Khán giả

Buổi ra mắt phần 3 của The Good Place có một học sinh mới: Khán giả

Eleanor (Kristen Bell) dường như đã tình nguyện cho chúng tôi làm vật tưởng nhớ. NBC's The Good Place là một chương trình thích thử thách tốt.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Tôi ghét từ "tàu đắm". Mọi người cảm thấy thoải mái trong la bàn đạo đức của riêng mình, và khi làm như vậy, họ thấy mình vượt qua sự phán xét.

Language