Bài viết này sẽ mô tả các phương pháp sửa đổi URL mà không cần tải lại trang web bằng JavaScript.
Làm cách nào để Sửa đổi/Thay đổi URL trong JavaScript mà không cần tải lại trang?
Để sửa đổi URL mà không cần tải lại trang web, hãy sử dụng phương pháp xác định trước JavaScript sau:
Phương pháp 1: Sửa đổi URL trong JavaScript mà không cần tải lại trang bằng phương thức “pushState()”
Để sửa đổi URL mà không cần tải lại trang web, hãy sử dụng “ đẩyState() ' phương pháp. Đó là một tính năng hoặc phương pháp được xác định trước của “ đối tượng lịch sử ” cho phép thay đổi lịch sử trình duyệt mà không cần điều hướng hoặc làm mới trang. Nó chỉ thêm hoặc sửa đổi ngăn xếp lịch sử và không tải một trang mới. Bằng cách sử dụng phương pháp này, bạn có thể chuyển đổi qua lại giữa các trang bằng cách thêm một mục mới vào ngăn xếp lịch sử của trình duyệt.
cú pháp
Thực hiện theo cú pháp đã cho cho phương thức “pushState()”:
cửa sổ. lịch sử . pushState ( tình trạng , tiêu đề , url ) ;
Đây:
- “ tình trạng ” đại diện cho mục nhập lịch sử mới.
- “ tiêu đề ” là văn bản cụ thể có thể được hiển thị trên thanh tiêu đề của trình duyệt.
- “ url ” cho biết URL được thay thế là một mục nhập mới.
Ví dụ
Trong tệp HTML, hãy tạo bốn nút gọi “ sửa đổiUrl() ” chức năng trên nút bấm:
< nút onclick = 'modifyUrl('Hướng dẫn CSS', 'CSSTutorial.html');' > 2 cái nút >
< nút onclick = 'modifyUrl('Hướng dẫn JavaScript', 'JavaScriptTutorial.html');' > 3 cái nút >
< nút onclick = 'modifyUrl('Hướng dẫn Java', 'JavaTutorial.html');' > 4 cái nút >
Định nghĩa một chức năng “ sửa đổiUrl() ” trong tệp JavaScript sẽ kích hoạt khi nhấp vào nút. Nó nhận hai tham số, “ tiêu đề ' và ' url ”. Khi phương thức được gọi khi nhấp vào nút, “tiêu đề” và “url” sẽ được chuyển thành đối số. Kiểm tra loại của “ pushState ” của đối tượng lịch sử, nếu không phải là “ không xác định ”. Sau đó, gọi “ history.pushState() ” để thay đổi URL:
chức năng sửa đổiUrl ( tiêu đề , url ) {
nếu như ( loại ( lịch sử. pushState ) != 'không xác định' ) {
đã từng là đối tượng = {
Tiêu đề : tiêu đề ,
url : url
} ;
lịch sử. pushState ( đối tượng , đối tượng Tiêu đề , đối tượng url ) ;
}
}
Có thể thấy rằng trên mỗi lần nhấp vào nút, URL sẽ được thay đổi thành công mà không cần tải lại trang:
Trong đầu ra ở trên, bạn có thể thấy rằng nút mũi tên quay lại ở trên cùng bên trái ( <- ) được bật trong khi nhấp vào nút, điều này cho biết bạn có thể điều hướng qua lại vì “ đẩyState() ” thêm URL mới vào ngăn xếp lịch sử.
Phương pháp 2: Sửa đổi URL trong JavaScript mà không cần tải lại trang bằng phương pháp “replaceState()”
Sử dụng ' thay thếState() ” để sửa đổi URL mà không cần tải lại trang web. Đó cũng là một đặc điểm của “ đối tượng lịch sử ” nhưng nó sẽ không thêm mục mới vào ngăn xếp lịch sử. Nó thay đổi trạng thái hiện tại của lịch sử trình duyệt và thay thế nó bằng một trạng thái mới. Bằng cách sử dụng phương pháp này, bạn không thể chuyển đổi qua lại giữa các trang.
cú pháp
Cú pháp đã cho được sử dụng cho phương thức “replaceState()”:
Ví dụ
Trong hàm đã xác định, hãy gọi “ thay thếState() ” để thay thế URL khi nhấp vào nút mà không cần tải lại hoặc điều hướng trang:
nếu như ( loại ( lịch sử. thay thếTrạng thái ) != 'không xác định' ) {
đã từng là đối tượng = {
Tiêu đề : tiêu đề ,
url : url
} ;
lịch sử. thay thếTrạng thái ( đối tượng , đối tượng Tiêu đề , đối tượng url ) ;
}
}
Đầu ra cho biết rằng trên mỗi lần nhấp vào nút, URL đã bị thay đổi và không có tùy chọn điều hướng để quay lại khi nút mũi tên quay lại bị tắt:
Chúng tôi đã cung cấp tất cả thông tin cần thiết liên quan đến việc sửa đổi URL mà không cần tải lại trang bằng JavaScript.
Phần kết luận
Để sửa đổi/thay đổi URL mà không làm mới trang web, hãy sử dụng “ đẩyState() ” phương pháp hoặc “ thay thếState() ' phương pháp. Phương thức “pushState()” thêm URL mới làm mục nhập mới trong ngăn xếp lịch sử và cho phép người dùng điều hướng qua lại. Trong khi phương thức “replaceState()” thay thế URL và không cho phép di chuyển về trang sau. Bài viết này đã mô tả các phương pháp sửa đổi URL mà không cần tải lại trang web bằng JavaScript.