Hướng dẫn refresh part of page javascript - làm mới một phần của trang javascript

Khi bạn đang phát triển các ứng dụng như blog hoặc một trang mà dữ liệu có thể thay đổi dựa trên các 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 tốt - Bạn có thể thực hiện loại chức năng này trong JavaScript với một dòng mã duy nhất.

Trong bài viết này, chúng tôi sẽ tìm hiểu cách tải lại một trang web trong JavaScript, cũng như xem một số tình huống khác mà chúng tôi có thể muốn thực hiện các tải lại này và cách làm như vậy.

Cách làm mới một trang trong JavaScript với location.reload()

Bạn có thể sử dụng phương thức JavaScript location.reload() để 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 pháp

setInterval(function()
{
    alert("hi");
}, 30000);

setInterval(function()
{
    alert("hi");
}, 30000);

setInterval(function()
{
    alert("hi");
}, 30000);

setInterval(function()
{
    alert("hi");
}, 30000);

Sau đây là cú pháp tải lại một trang:

window.location.reload();

Lưu ý: Khi bạn đọc qua một số tài nguyên trên trang tải lại trang trong JavaScript, bạn sẽ bắt gặp các giải thích khác nhau nói rằng phương thức Relaod lấy các giá trị boolean làm tham số và

setInterval(function()
{
    alert("hi");
}, 30000);

setInterval(function()
{
    alert("hi");
}, 30000);

Theo tài liệu MDN, một 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ế chưa 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 được xuất bản.

Mặt khác, các trình duyệt như Firefox, hỗ trợ việc sử dụng tham số Boolean không chuẩn được gọi là

setInterval(function()
{
    alert("hi");
}, 30000);

Ngoài Firefox, bất kỳ tham số nào bạn chỉ định trong cuộc gọi location.reload() 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 trang tải lại/làm mới trong javascript khi nhấp vào nút

Cho đến nay chúng ta đã thấy cách tải lại hoạt động trong JavaScript. Bây giờ, hãy để bây giờ xem cách bạn có thể thực hiện điều này khi một sự kiện xảy ra hoặc khi xảy ra một hành động như một nút nhấp chuột:

   Reload Page

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

setTimeout(foo, 30000);

setTimeout(foo, 30000);

Cách làm mới/tải lại một trang tự động trong JavaScript

Chúng tôi cũng có thể cho phép một trang đề cập đến sau một thời gian cố định sử dụng phương thức

setTimeout(foo, 30000);

setTimeout(() => {
  document.location.reload();
}, 3000);

Sử dụng mã trên trang web của chúng tôi sẽ tải lại cứ sau 3 giây.

Cho đến nay, chúng tôi đã thấy cách sử dụng phương thức tải lại trong tệp HTML của chúng tôi 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 một trang bằng hàm lịch sử trong JavaScript

Hàm lịch sử là một phương pháp khác để làm mới một trang. Hàm Lịch sử được sử dụng như bình thường để điều hướng trở lại hoặc chuyển tiếp bằng cách truyền theo giá trị tích cực 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);

Đ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. Nhưng nếu chúng ta chỉ muốn làm mới trang hiện tại, chúng ta 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 vượt qua

setTimeout(foo, 30000);

Lưu ý: Điều này cũng hoạt động giống như cách chúng tôi đã thêm phương thức

setInterval(function()
{
    alert("hi");
}, 30000);

setTimeout(foo, 30000);

setInterval(function()
{
    alert("hi");
}, 30000);

setTimeout(foo, 30000);

Gói lên

Trong bài viết này, chúng tôi đã 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 những người chuyển các tham số Boolean vào phương pháp

setInterval(function()
{
    alert("hi");
}, 30000);

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