HomeLập trìnhJavaScriptLàm mới trang...

Làm mới trang bằng JavaScript – Hướng dẫn về cửa sổ tải lại JS


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ị bất kỳ dữ liệu mới nào dựa trên các tương tác của người dùng đó. Tin vui – 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 một trang trong JavaScript với location.reload()

Bạn có thể dùng location.reload() Phương thức JavaScript để 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ệt.

Các reload() method là phương thức chính chịu trách nhiệm tải lại trang. Mặt khác, location 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 một trong hai document.location hoặc window.location.

Sau đâ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 bằng 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 location.reload(true) 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ợp.

Đọc thêm  JavaScript 设计模式

Theo 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 location.reload() – và trên thực tế đã có chẳng bao giờ là một phần của bất kỳ đặc điểm kỹ thuật nào cho location.reload() từng xuất bản.

Mặ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à forceGetlocation.reload()hướng dẫn Firefox bỏ qua bộ nhớ đệm và buộc tải lại tài liệu hiện tại.

Ngoài Firefox, bất kỳ tham số nào bạn chỉ định trong location.reload() cuộc gọi trong các trình duyệt khác sẽ bị bỏ qua và không có hiệu lực.

Cá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:

<button type="button" onClick="window.location.reload()">
   Reload Page
</button>

Ghi chú: Điều này hoạt động tương tự như khi chúng ta sử dụng document.location.reload().

Cá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 một trang giới thiệu sau một thời gian cố định sử dụng setTimeOut() phương pháp như được thấy dưới đây:

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 đính kèm nó vào các sự kiện cụ thể, cũng như trong tệp JavaScript của chúng ta.

Đọc thêm  Bản đồ JavaScript, Thu nhỏ và Lọc

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:

history.go(-1);

Thao tác này sẽ tải trang và đưa chúng ta đến trang trước đó mà chúng ta đã đ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 (một giá trị trung tính):

history.go();
history.go(0);

Ghi chú: Điều này cũng hoạt động theo cách tương tự như chúng tôi đã thêm reload() phương pháp để setTimeOut() phương thức và sự kiện nhấp chuột trong HTML.

kết thúc

Trong bài viết này, chúng ta đã học cách làm mới một 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 các tham số boolean vào reload() phương pháp.

Cảm ơn vì đã đọc!



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status