Cách ngăn làm mới trang trong javascript

Bạn phải phát hiện sự kiện nút quay lại của trình duyệt và chuyển làm đầu vào của trang bạn muốn để ngăn tải lại URL cho biết bạn đến từ một lần nhấp vào nút quay lại

bạn phải sử dụng Hàm chạy JavaScript để triển khai

mã này

$(window).on('popstate', function(event) {
 alert("pop");
});

Thay vì cảnh báo, bạn phải trả về "Đúng" hoặc "sai", như

$(window).on('popstate', function(event) {
 return true;
});

và sau đó đưa người dùng đến trang mà bạn muốn ngăn Tải lại URL, chuyển giá trị boolean do hàm này trả về

HOẶC

Bạn có thể sử dụng giá trị được trả về bởi chức năng này thông qua ứng dụng này trong Forge

https. //www. hệ thống bên ngoài. com/forge/component-overview/990/javascript-demo-how-to

1- Ẩn biến đầu vào

2-Đưa Mã Javascript của bạn lên màn hình, sử dụng các thuộc tính mở rộng để lưu giá trị do hàm của bạn trả về, sử dụng sự kiện "onkeypress" như ví dụ này

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 $(window).on('popstate', function(event) {  return true; });4

Bạn có thể sử dụng phương pháp JavaScript

$(window).on('popstate', function(event) {
 return true;
});

4 để 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

Phương thức

$(window).on('popstate', function(event) {
 return true;
});

6 là phương thức chính chịu trách nhiệm tải lại trang. Mặt khác,

$(window).on('popstate', function(event) {
 return true;
});

7 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

$(window).on('popstate', function(event) {
 return true;
});

8 hoặc

   Reload Page

0

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

   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ợp

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

$(window).on('popstate', function(event) {
 return true;
});

4 — 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

$(window).on('popstate', function(event) {
 return true;
});

4 từng được 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à

   Reload Page

4 cho

$(window).on('popstate', function(event) {
 return true;
});

4, 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ại

Ngoài Firefox, mọi tham số bạn chỉ định trong lệnh gọi

$(window).on('popstate', function(event) {
 return true;
});

4 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

   Reload Page

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

   Reload Page

7

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 làm mới trang sau một thời gian cố định, sử dụng phương pháp ________ 28 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

$(window).on('popstate', function(event) {
 return true;
});

0

Đ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 tính)

$(window).on('popstate', function(event) {
 return true;
});

2

Ghi chú. Điều này cũng hoạt động giống như cách chúng ta thêm phương thức

$(window).on('popstate', function(event) {
 return true;
});

6 vào phương thức

   Reload Page

8 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 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

$(window).on('popstate', function(event) {
 return true;
});

6

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

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

Joel Olawanle

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