Các phương pháp làm mới trang bằng JavaScript
JavaScript cung cấp nhiều cách khác nhau để làm mới hoặc tải lại trang web. Dưới đây là các phương pháp phổ biến và cách sử dụng chúng.
1. Sử dụng phương thức reload() Phương thức này buộc trình duyệt phải làm mới trang hiện tại.
Cú pháp:
location.reload([forceGet])
Tham số:
- forceGet: Tham số tùy chọn, mặc định là false, lấy trang từ cache của trình duyệt.
- Khi đặt là true, trang sẽ được lấy từ máy chủ theo phương thức GET, tương tự như nhấn F5 trên trình duyệt.
2. Sử dụng phương thức replace() Phương thức này thay thế URL hiện tại trong lịch sử trình duyệt, nghĩa là bạn không thể sử dụng nút "Lùi" hoặc "Tiến" để truy cập lại URL đã được thay thế.
Cú pháp:
location.replace(url)
Phương thức này hữu ích khi bạn muốn tải lại trang mà không muốn hiển thị thông báo "Trang đã hết hạn" với các trang có phương thức POST.
// Làm mới trang hiện tại
location.replace(location.href);
// Quay lại trang trước và làm mới
location.replace(document.referrer);
Các phương pháp làm mới trang bằng JavaScript khác:
history.go(0);
location.reload();
location = location;
location.assign(location);
document.execCommand('Refresh');
window.navigate(location);
location.replace(location);
document.URL = location.href;
Tự động làm mới trang:
1. Sử dụng thẻ meta:
<meta http-equiv="refresh" content="20">
Thao tác này sẽ làm mới trang mỗi 20 giây.
2. Tự động chuyển hướng trang:
<meta http-equiv="refresh" content="20;url=https://example.com">
Thao tác này sẽ chuyển đến trang https://example.com sau 20 giây.
3. Sử dụng JavaScript để tự động làm mới:
function lamMoiTrang() {
window.location.reload();
}
// Làm mới sau mỗi 1 giây
setInterval(lamMoiTrang, 1000);
4. Làm mới các khung (frame) trong trang:
// Làm mới trang chứa khung
<script>
parent.location.reload();
</script>
// Làm mới trang cha từ cửa sổ con
<script>
self.opener.location.reload();
</script>
// Hoặc sử dụng liên kết:
<a href="javascript:opener.location.reload()">Làm mới</a>
// Làm mới một khung cụ thể
<script>
parent.tenKhungKhac.location.reload();
</script>
Làm mới khi mở hoặc đóng cửa sổ:
<!-- Làm mới khi mở cửa sổ mới -->
<body onload="opener.location.reload()">
<!-- Làm mới khi đóng cửa sổ -->
<body onUnload="opener.location.reload()">