Tự động tải lại trang javascript

Giả sử chúng tôi đã cung cấp một tài liệu HTML và nhiệm vụ là tự động làm mới trang web sau một khoảng thời gian nhất định trong trình duyệt web. Chúng tôi sẽ xác định trước một khoảng thời gian và trình duyệt sẽ tự động làm mới trang web

Thí dụ. Bạn đang tạo một trang web tự động làm mới cần được làm mới sau một khoảng thời gian ngắn hơn nhất định. Vì vậy, trong trường hợp này, bạn có thể sử dụng thẻ meta http-equiv để làm mới trang web. Một minh họa khác của thẻ http-equiv này là nó có thể được sử dụng để tải lại một trang web thời tiết cần được cập nhật sau mỗi khoảng thời gian nhỏ để hiển thị những thay đổi thời tiết từng phút

Cách tiếp cận 1. Người ta có thể tự động làm mới trang web bằng cách sử dụng thẻ meta trong phần tử đầu của HTML bằng cách sử dụng thuộc tính http-equiv. Nó là một thuộc tính sẵn có với HTML 5. Người ta có thể thêm khoảng thời gian làm mới bằng cách sử dụng thuộc tính nội dung trong thẻ Meta

Thuộc tính tương đương HTTP có thể được sử dụng để mô phỏng tiêu đề phản hồi HTTP. Thuộc tính được hỗ trợ bởi tất cả các trình duyệt web chính như Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera Mini, v.v.

cú pháp

<meta http-equiv="refresh" content="10">

Thí dụ. Ví dụ này cho thấy cách tiếp cận được giải thích ở trên

html




________số 8_______

<html>

<head>

    <

<script>
    function autoRefresh() {
        window.location = window.location.href;
    }
    setInterval('autoRefresh()', 5000);
</script>
1_______1_______2
<script>
    function autoRefresh() {
        window.location = window.location.href;
    }
    setInterval('autoRefresh()', 5000);
</script>
1_______11_______

    <

<script>
    function autoRefresh() {
        window.location = window.location.href;
    }
    setInterval('autoRefresh()', 5000);
</script>
7
<script>
    function autoRefresh() {
        window.location = window.location.href;
    }
    setInterval('autoRefresh()', 5000);
</script>
8_______1_______9_______8_______0 <!DOCTYPE html>1
<script>
    function autoRefresh() {
        window.location = window.location.href;
    }
    setInterval('autoRefresh()', 5000);
</script>
9<!DOCTYPE html>3>

<!DOCTYPE html>5head>

<<!DOCTYPE html>9_______11_______

    <<3_______9_______4<3_______11_______

    <<9html0<9_______11_______

<!DOCTYPE html>5<!DOCTYPE html>9>

<!DOCTYPE html>5html>

đầu ra

Tự động tải lại trang javascript
 

Cách tiếp cận 2. Sử dụng phương thức setInterval()

Một phương pháp khác để truy cập thuộc tính tự động làm mới của trang web là sử dụng mã JavaScript sau cho đến khi ClearInterval() được gọi, setInterval() sẽ tiếp tục tự gọi liên tục

Trong phần này, chúng ta sẽ tìm hiểu tải lại và làm mới trang tự động. Chúng tôi sẽ sử dụng jQuery để làm điều này. Chúng tôi có thể tải lại hoặc làm mới trang được nhúng hoặc trang đang hoạt động theo cách thủ công hoặc tự động với sự trợ giúp của jQuery. Nếu chúng tôi đang phát triển một trang web và chúng tôi muốn thêm tự động làm mới sau một khoảng thời gian, chúng tôi có thể làm điều đó bằng cách sử dụng JavaScript. Chúng tôi có thể sử dụng setTimeout(), thẻ meta http-equiv và setInterval() để tự động tải lại trang. Có nhiều công nghệ khác nhau như Codeigniter,. Net, PHP, Laravel, Java để tự động tải lại hoặc làm mới trang web

Đôi khi, khi chúng ta làm việc trên một trang, chúng ta cần tải lại trang sau một khoảng thời gian và khoảng thời gian đó có thể là 10 giây, 15 giây, 20 giây, 30 giây, v.v. Trong ví dụ dưới đây, chúng tôi sẽ mô tả các quy trình khác nhau để làm mới trang HTML. Phần này sẽ cung cấp 3 ví dụ để tự động tải lại trang PHP bằng một số phương pháp và làm mới trang PHP bằng JavaScript. Nếu chúng tôi muốn làm mới trang theo cách thủ công, chúng tôi cũng có thể làm điều đó bằng cách chỉ định một số khoảng thời gian

ví dụ 1

Trong ví dụ đầu tiên, chúng ta sẽ sử dụng phương thức setTimeout() để tự động tải lại và làm mới một trang. Phương thức setTimeout() nhận hai tham số. Trong tham số đầu tiên, chúng tôi sẽ mô tả một chức năng, được sử dụng để chứa mã tải lại và làm mới trang. Trong đối số thứ hai, chúng tôi sẽ mô tả khoảng thời gian sau đó việc thực thi chức năng diễn ra. Khoảng thời gian phải tính bằng mili giây. Phương pháp này sẽ thực thi chức năng một lần duy nhất

ví dụ 2

Trong ví dụ thứ hai, chúng ta sẽ sử dụng phương thức setInterval() để tự động tải lại và làm mới một trang. Phương thức setInterval() nhận hai tham số. Trong tham số đầu tiên, chúng tôi sẽ mô tả một chức năng, được sử dụng để chứa mã tải lại và làm mới trang. Trong đối số thứ hai, chúng ta sẽ mô tả khoảng thời gian, được sử dụng để gọi hàm nhiều lần. Khoảng thời gian phải tính bằng mili giây. Phương thức này lặp đi lặp lại việc thực thi chức năng sau khoảng thời gian nhất định cho đến khi ClearInterval() được gọi hoặc cửa sổ được đóng lại. Ở đây, chúng tôi không sử dụng bất kỳ phương thức nào để dừng thực thi hàm, được chỉ định trong phương thức setInterval(). Điều đó có nghĩa là phương thức thực thi chức năng cho đến khi chúng ta đóng cửa sổ

ví dụ 3

Trong ví dụ thứ ba, chúng tôi sẽ sử dụng Meta để tự động tải lại và làm mới trang. Sử dụng thẻ Meta, chúng ta có thể đặt thời gian tính bằng giây. Sau đó, chúng tôi sẽ nhắm mục tiêu trang mà chúng tôi muốn tải lại trong khoảng thời gian đã chỉ định. Nếu chúng ta muốn chuyển một trang sang một trang khác, chúng ta có thể sử dụng URL để thực hiện việc này. Nếu chúng tôi không chỉ định URL, chúng tôi sẽ được tải lại trên cùng một trang

Bây giờ ví dụ trên của chúng tôi đã sẵn sàng để chạy. Khi chúng tôi chạy bất kỳ ví dụ nào trong số này, đầu ra sau sẽ được tạo

Làm cách nào để tự động tải lại một trang trong JavaScript?

Bạn có thể sử dụng vị trí. 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. Phương thức reload() là phương thức chính chịu trách nhiệm tải lại trang.

Làm cách nào để làm mới một trang trong JavaScript mà không cần tải lại?

Có hai phương pháp để sửa đổi URL trong JavaScript mà không cần tải lại trang. đó là. Phương thức pushState(). Phương thức replaceState() .

Làm cách nào để tự động làm mới div bằng JavaScript?

Để tự động làm mới phần tử DIV vài giây một lần, tôi sẽ gọi một phương thức (sẽ làm mới nội dung của DIV) từ bên trong cửa sổ. hàm setInterval(), tại một khoảng thời gian xác định (vài giây) . Bạn có thể tìm hiểu thêm về JavaScript. hàm setInterval() tại đây.

Làm cách nào để tự động làm mới trang web trong jquery?

Chúng tôi có thể sử dụng setTimeout(), thẻ meta http-equiv và setInterval() để tự động tải lại trang. Có nhiều công nghệ khác nhau như Codeigniter,. Net, PHP, Laravel, Java để tự động tải lại hoặc làm mới trang web.