Sửa đổi URL trong JavaScript mà không cần tải lại trang

Thay đổi URL động bằng JavaScript

Khi làm việc với các ứng dụng web hiện đại, bạn có thể thấy mình cần sửa đổi URL mà không cần tải lại trang. Điều này có thể đặc biệt hữu ích để tạo trải nghiệm người dùng liền mạch.

Trong hướng dẫn này, chúng ta sẽ khám phá các phương pháp thay đổi phần URL sau tên miền, bao gồm các kỹ thuật cho phép bạn truy cập phần trước ký hiệu băm (#). Điều này đảm bảo tuân thủ các chính sách tên miền chéo trong khi đạt được sửa đổi URL mong muốn.

Giải thích chi tiết về sửa đổi URL trong JavaScript

Kịch bản đầu tiên sử dụng history.pushState() phương thức, là một phần của API Lịch sử. Lệnh này cho phép nhà phát triển thêm mục nhập mới vào ngăn xếp lịch sử phiên của trình duyệt, thay đổi hiệu quả URL hiển thị trên thanh địa chỉ mà không cần tải lại trang. Trong kịch bản, const newURL = "/page2.php"; đặt đường dẫn mới và history.pushState(null, "", newURL); thay đổi URL thành đường dẫn mới này. Bằng cách gói history.pushState lệnh trong một chức năng như function changeURL(newPath), chúng tôi có thể cập nhật động URL nếu cần. Kỹ thuật này đặc biệt hữu ích cho các ứng dụng một trang (SPA) trong đó nội dung thay đổi linh hoạt mà không cần tải lại toàn bộ trang.

Địa chỉ tập lệnh thứ hai thay đổi hàm băm URL bằng cách sử dụng window.location.hash. Thuộc tính này nhận hoặc đặt phần neo của URL theo sau ký hiệu băm (#). Bằng cách thiết lập const hashValue = "newSection"; Và window.location.hash = hashValue;, hàm băm URL sẽ thay đổi thành #newSection mà không cần tải lại trang. Cách tiếp cận này hữu ích khi điều hướng trong cùng một trang hoặc liên kết đến các phần cụ thể trong tài liệu. Ngoài ra, chức năng số 8 gói gọn chức năng này, giúp dễ dàng thay đổi phần băm của URL một cách linh hoạt. Cả hai tập lệnh đều cung cấp những cách liền mạch để sửa đổi URL và cải thiện trải nghiệm người dùng bằng cách tránh tải lại trang không cần thiết.

const newURL = "/page2.php";
history.pushState(null, "", newURL);
// This changes the URL to /page2.php without reloading the page

function changeURL(newPath) {
    window.history.pushState({}, "", newPath);
}
// Example usage
changeURL("/page2.php");

const hashValue = "newSection";
window.location.hash = hashValue;
// This changes the URL hash to #newSection

function updateHash(newHash) {
    window.location.hash = newHash;
}
// Example usage
updateHash("newSection");

Khám phá các phương pháp bổ sung để sửa đổi URL mà không cần tải lại

Một khía cạnh khác của việc sửa đổi URL mà không cần tải lại trang liên quan đến việc sử dụng replaceState() phương thức từ API Lịch sử. Trong khi pushState() thêm một mục lịch sử mới, replaceState() sửa đổi mục nhập lịch sử hiện tại. Điều này có thể đặc biệt hữu ích khi bạn muốn thay đổi URL mà không làm lộn xộn lịch sử của người dùng với nhiều trạng thái. Ví dụ: nếu bạn có một ứng dụng một trang có nội dung thay đổi thường xuyên, bạn có thể muốn cập nhật URL để phản ánh trạng thái hiện tại mà không cần thêm từng thay đổi vào lịch sử. Điều này giữ cho chức năng nút quay lại sạch sẽ và thân thiện với người dùng.

Để sử dụng replaceState(), bạn có thể viết một hàm tương tự như changeURL() nhưng thay vào đó hãy gọi history.replaceState() bên trong nó. Ví dụ, function replaceURL(newPath) có thể sử dụng history.replaceState(null, "", newPath); để cập nhật URL. Kỹ thuật này có giá trị trong việc cải thiện trải nghiệm người dùng bằng cách giữ URL đồng bộ với trạng thái của ứng dụng mà không tạo các mục lịch sử không cần thiết. Hơn nữa, nó cung cấp một cách hiệu quả hơn để quản lý lịch sử của trình duyệt, đặc biệt là trong các ứng dụng web động.