API lịch sử HTML5 chắc chắn là cách phù hợp cho các trang web hiện đại. Nó hoàn thành nhiệm vụ trong tầm tay, đồng thời cung cấp chức năng bổ sung. Bạn có thể sử dụng
window.location.reload[];
2 hoặc window.location.reload[];
3 để sửa đổi URL trong trình duyệt, tùy theo nhu cầu của bạnCác đối số cho cả hai phương pháp đều giống nhau, cho phép bạn chuyển một đối tượng
window.location.reload[];
4 có thể tuần tự hóa tùy chỉnh làm đối số đầu tiên, một window.location.reload[];
5 tùy chỉnh [mặc dù hầu hết các trình duyệt sẽ bỏ qua tham số này] và window.location.reload[];
6 bạn muốn thêm/thay thế trong lịch sử của trình duyệt. Hãy nhớ rằng API lịch sử chỉ cho phép các URL có nguồn gốc giống nhau, vì vậy bạn không thể điều hướng đến một trang web hoàn toàn khácSử dụng API vị trí
API vị trí cũ hơn không phải là công cụ tốt nhất cho công việc. Nó tải lại trang nhưng vẫn cho phép bạn sửa đổi URL hiện tại và có thể hữu ích khi làm việc với các trình duyệt cũ. Bạn có thể sửa đổi URL, sử dụng
window.location.reload[];
7, window.location.reload[];
8 hoặc window.location.reload[];
9Như bạn có thể thấy, cả ba tùy chọn sẽ khiến trang tải lại, đây có thể là điều không mong muốn. Không giống như API Lịch sử, bạn chỉ có thể đặt URL mà không có bất kỳ đối số bổ sung nào. Cuối cùng, API Vị trí không hạn chế bạn đối với các URL có cùng nguồn gốc, điều này có thể gây ra sự cố bảo mật nếu bạn không cẩn thận
Khi bạn đang phát triển các ứng dụng như blog hoặc trang mà dữ liệu có thể thay đổi dựa trên hành động của người dùng, bạn sẽ muốn trang đó làm mới thường xuyên
Khi trang làm mới hoặc tải lại, nó sẽ hiển thị mọi dữ liệu mới dựa trên các tương tác của người dùng đó. Tin tốt - bạn có thể triển khai loại chức năng này trong JavaScript bằng một dòng mã
Trong bài viết này, chúng ta sẽ tìm hiểu cách tải lại một trang web bằng JavaScript, cũng như xem một số tình huống khác mà chúng ta có thể muốn triển khai các lần tải lại này và cách thực hiện
Cách làm mới trang bằng JavaScript với
Reload Page
0
Reload Page
Bạn có thể sử dụng phương pháp JavaScript
Reload Page
0 để tải lại URL hiện tại. Phương pháp này hoạt động tương tự như nút Làm mới của trình duyệtPhương thức
Reload Page
2 là phương thức chính chịu trách nhiệm tải lại trang. Mặt khác,
Reload Page
3 là một giao diện đại diện cho vị trí thực tế [URL] của đối tượng mà nó được liên kết đến – trong trường hợp này là URL của trang chúng tôi muốn tải lại. Nó có thể được truy cập thông qua
Reload Page
4 hoặc
Reload Page
0Sau đây là cú pháp tải lại một trang
window.location.reload[];
Ghi chú. Khi bạn đọc qua một số tài nguyên về “tải lại trang trong JavaScript”, bạn sẽ bắt gặp nhiều cách giải thích khác nhau cho biết rằng phương thức relaod nhận các giá trị boolean làm tham số và rằng
Reload Page
1 giúp buộc tải lại để bỏ qua bộ đệm của nó. Nhưng đây không phải là trường hợpTheo Tài liệu MDN, tham số boolean không phải là một phần của thông số kỹ thuật hiện tại cho
Reload Page
0 — và trên thực tế chưa bao giờ là một phần của bất kỳ thông số kỹ thuật nào cho
Reload Page
0 từng được xuất bảnMặt khác, các trình duyệt như Firefox hỗ trợ sử dụng tham số boolean không chuẩn được gọi là
Reload Page
4 cho
Reload Page
0, hướng dẫn Firefox bỏ qua bộ đệm của nó và buộc tải lại tài liệu hiện tạiNgoài Firefox, mọi tham số bạn chỉ định trong lệnh gọi
Reload Page
0 trong các trình duyệt khác sẽ bị bỏ qua và không có hiệu lựcCách thực hiện tải lại/làm mới trang trong JavaScript khi một nút được nhấp
Cho đến giờ chúng ta đã thấy cách tải lại hoạt động trong JavaScript. Bây giờ, hãy xem cách bạn có thể triển khai điều này khi một sự kiện xảy ra hoặc khi một hành động như nhấp vào nút xảy ra
Reload Page
Ghi chú. Điều này hoạt động tương tự như khi chúng ta sử dụng
Reload Page
7Cách tự động làm mới/tải lại trang trong JavaScript
Chúng tôi cũng có thể cho phép làm mới trang sau một thời gian cố định bằng cách sử dụng phương pháp ________ 08 như bên dưới
setTimeout[[] => {
document.location.reload[];
}, 3000];
Sử dụng mã trên trang web của chúng tôi sẽ tải lại sau mỗi 3 giây
Cho đến giờ, chúng ta đã biết cách sử dụng phương thức tải lại trong tệp HTML của mình khi chúng tôi đính kèm nó vào các sự kiện cụ thể, cũng như trong tệp JavaScript của chúng tôi
Cách làm mới/tải lại trang bằng chức năng lịch sử trong JavaScript
Chức năng Lịch sử là một phương pháp khác để làm mới trang. Hàm lịch sử được sử dụng như thường lệ để điều hướng quay lại hoặc chuyển tiếp bằng cách chuyển vào giá trị dương hoặc âm
Ví dụ: nếu chúng ta muốn quay ngược thời gian, chúng ta sẽ sử dụng
________số 8Điều này sẽ tải trang và đưa chúng tôi đến trang trước mà chúng tôi đã điều hướng đến. Nhưng nếu chúng tôi chỉ muốn làm mới trang hiện tại, chúng tôi có thể làm như vậy bằng cách không chuyển bất kỳ tham số nào hoặc bằng cách chuyển
Reload Page
9 [một giá trị trung lập]window.location.reload[];
0Ghi chú. Điều này cũng hoạt động giống như cách chúng ta thêm phương thức
Reload Page
2 vào phương thức
Reload Page
8 và sự kiện nhấp chuột trong HTMLkết thúc
Trong bài viết này, chúng ta đã học cách làm mới trang bằng JavaScript. Chúng tôi cũng đã làm rõ một quan niệm sai lầm phổ biến dẫn đến việc mọi người chuyển tham số boolean vào phương thức
Reload Page
2Cảm ơn vì đã đọc
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
Nhà phát triển Frontend & Người viết kỹ thuật
Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu