Hướng dẫn prevent reload page javascript - ngăn tải lại trang javascript

Quay trở lại những ngày Ole của CGI, chúng tôi đã có nhiều hình thức sẽ kích hoạt các hành động phụ trợ khác nhau. Chẳng hạn như thông báo văn bản cho các nhóm, công việc in, canh tác dữ liệu, v.v.

Nếu người dùng ở trên một trang đang nói "Vui lòng đợi ... thực hiện một số công việc lớn có thể mất một thời gian.". Họ có nhiều khả năng đạt được làm mới và điều này sẽ rất tệ!

TẠI SAO? Bởi vì nó sẽ kích hoạt nhiều việc làm chậm hơn và cuối cùng làm hỏng toàn bộ.

Giải pháp? Cho phép họ làm hình thức của họ. Khi họ gửi biểu mẫu của họ ... bắt đầu công việc của bạn và sau đó hướng họ đến một trang khác bảo họ chờ đợi.

Nơi trang ở giữa thực sự giữ dữ liệu biểu mẫu cần thiết để bắt đầu công việc. Tuy nhiên, trang chờ chứa một vụ phá hủy lịch sử JavaScript. Vì vậy, họ có thể tải lại trang chờ đó tất cả những gì họ muốn và nó sẽ không bao giờ kích hoạt công việc ban đầu để bắt đầu trong nền vì trang chờ đó chỉ chứa dữ liệu biểu mẫu cần thiết cho chính sự chờ đợi.

Hy vọng điều đó có ý nghĩa.

Chức năng phá hủy lịch sử cũng ngăn họ nhấp lại và sau đó làm mới.

Nó rất liền mạch và làm việc tuyệt vời trong nhiều năm cho đến khi tổ chức phi lợi nhuận bị thương.

Ví dụ: Biểu mẫu nhập cảnh - Thu thập tất cả thông tin của họ và khi được gửi, điều này sẽ kích hoạt công việc phụ trợ của bạn.

Phản hồi từ mục nhập biểu mẫu - Trả về HTML thực hiện chuyển hướng đến trang chờ tĩnh của bạn và/hoặc bài đăng/nhận sang một biểu mẫu khác (trang chờ).

Trang chờ - chỉ chứa dữ liệu biểu mẫu liên quan đến trang chờ cũng như JavaScript để phá hủy lịch sử gần đây nhất. Giống như (-1 hoặc -2) để chỉ phá hủy các trang gần đây nhất, nhưng vẫn cho phép họ quay trở lại trang nhập biểu mẫu gốc của họ.

Khi họ ở trên trang chờ của bạn, họ có thể nhấp vào làm mới bao nhiêu tùy thích và nó sẽ không bao giờ sinh ra công việc mẫu gốc trên phần phụ trợ. Thay vào đó, trang chờ của bạn sẽ nắm lấy một meta thời gian làm mới để nó luôn có thể kiểm tra tình trạng công việc của họ. Khi công việc của họ được hoàn thành, họ được chuyển hướng từ trang chờ đến bất cứ nơi nào bạn muốn.

Nếu họ làm mới theo cách thủ công ... họ chỉ đơn giản là thêm một kiểm tra tình trạng công việc của họ trong đó.

Hy vọng điều đó sẽ giúp. Chúc may mắn.

Bạn thực sự không thể ngăn chặn việc làm mới một trang, nếu người dùng đã chọn làm mới trang trong khi nó vẫn đang tải thì thực sự có các tùy chọn hạn chế. Bạn có thể thêm người nghe vào các sự kiện như "F5" hoặc "Ctrl + R" để nắm bắt và triệt tiêu chúng, nhưng nút làm mới đó vẫn có thể được sử dụng (và, điều gì sẽ ngăn người dùng hủy tải trang?)

Tôi nghĩ rằng một trong những hành động gần nhất mà bạn có thể đến là nhắc nhở người dùng trước khi trang điều hướng, đó là điều mà bạn thường thấy trong một số trang web hỏi liệu bạn có muốn làm mới/rời đi trong khi bạn vẫn chưa được lưu hoặc không được lưu. Điều này đang sử dụng phương thức window.beforeunload đơn giản cho phép bạn cung cấp một chuỗi sẽ được nhắc cho người dùng.

const onConfirmRefresh = function (event) {
  event.preventDefault();
  return event.returnValue = "Are you sure you want to leave the page?";
}

window.addEventListener("beforeunload", onConfirmRefresh, { capture: true });

Ví dụ, chủ yếu có nguồn gốc từ Window: AfterUnload Event - API Web [^], xin lưu ý rằng việc sử dụng sự kiện này không phải lúc nào cũng chặn người dùng nhưng không nhắc họ trước khi họ chọn rời đi. Và nếu người dùng làm mới trước khi khối JS được tải và thực thi, dù sao họ cũng sẽ không nhận được lời nhắc.

Tôi có lẽ nói về lý do tại sao bạn cần chặn hoặc ngăn chặn một trang làm mới vì đó không phải là một yêu cầu của bất kỳ trang web nào?


Hãy nói những gì chúng ta cần đạt được là khi người dùng gửi biểu mẫu HTML này, chúng tôi xử lý sự kiện gửi ở phía máy khách và ngăn trình duyệt tải lại ngay khi biểu mẫu được gửi

Hình thức HTML

<form name="formcontact1" action="#">
<input
type='text'
name='email'
size="36"
placeholder="Your e-mail :)"/>
<input
   type="submit"
   name="submit"
   value="SUBMIT"
   onclick="ValidateEmail(document.formcontact1.email)"
/>
</form>

Bây giờ, cách dễ dàng nhất và đáng tin cậy nhất là bằng cách điều chỉnh hàm ValidateMail () của chúng tôi để bao gồm dòng sau ngay ở đầu định nghĩa của nó -

function ValidateEmail(event, inputText){
   event.preventDefault();
   //remaining function logic goes here
}

Những gì ngăn chặnDefault () làm là nó nói với trình duyệt để ngăn chặn hành vi mặc định của nó và cho chúng tôi xử lý biểu mẫu gửi sự kiện ở phía máy khách.

Mã HTML đầy đủ cho điều này là -

Thí dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form name="formcontact1" action="#">
<input
type='text'
name='email'
size="36"
placeholder="Your e-mail :)"/>
<input
   type="submit"
   name="submit"
   value="SUBMIT"
   onclick="ValidateEmail(document.formcontact1.email)"
/>
</form>
<script>
{
   function ValidateEmail(event, inputText){
      event.preventDefault();
      //remaining function logic goes here
   }
}
</script>
</body>
</html>

Hướng dẫn prevent reload page javascript - ngăn tải lại trang javascript

Cập nhật ngày 18 tháng 8 năm 2020 07:08:16

  • Câu hỏi và câu trả lời liên quan
  • Làm thế nào để tải lại trang hiện tại mà không mất bất kỳ dữ liệu biểu mẫu nào với HTML?
  • Làm thế nào để dừng việc gửi biểu mẫu bằng JavaScript?
  • Làm thế nào để dừng một trang tải từ selen trong chrome?
  • Làm thế nào để dừng tải trang trong Firefox lập trình trong selenium?
  • Làm cho mảng trở nên độc đáo trong JavaScript
  • Làm thế nào để tải lại hoạt động trong Android?
  • Làm thế nào để buộc Trình gỡ lỗi kịch bản của Chrome tải lại JavaScript?
  • Tạo bản đồ đầu tiên của bạn trong JavaScript
  • Làm cho hai chuỗi tăng lên trong JavaScript
  • Làm thế nào để dừng một vòng lặp bằng nút dừng trong tkinter?
  • Làm thế nào để in một trang bằng JavaScript?
  • Làm thế nào để dừng một chức năng trong quá trình thực hiện của nó trong JavaScript?
  • Làm mới trang sau khi xóa tất cả các trường biểu mẫu trong jQuery?
  • Làm thế nào để ngăn chặn việc thực thi một chức năng với JavaScript?
  • Phương thức tải lại vị trí DOM () HTML DOM