Cách hiển thị thông báo cảnh báo khi tải trang trong javascript

Hướng dẫn này sẽ dạy chúng ta gọi một hàm JavaScript khi tải trang. Trong nhiều trường hợp, khi lập trình với HTML và JavaScript, lập trình viên cần gọi một hàm, trong khi tải trang web hoặc sau khi tải trang xong. Ví dụ: lập trình viên cần hiển thị thông báo chào mừng cho người dùng khi tải trang và lập trình viên cần gọi hàm JavaScript sau sự kiện tải trang

Có nhiều cách khác nhau để gọi một hàm khi tải trang hoặc sau khi tải trang trong JavaScript và chúng ta sẽ xem xét từng cách một trong hướng dẫn này

• Sử dụng sự kiện onload trong thẻ

• Sử dụng cửa sổ. tải sự kiện

• Sử dụng Sự kiện DOMContentloaded

Sử dụng sự kiện onload trong thẻ

Cách tiếp cận đầu tiên để gọi một chức năng khi tải trang là sử dụng sự kiện tải bên trong thẻ HTML. Như bạn đã biết, phần thân HTML chứa toàn bộ nội dung của trang web và khi tất cả phần thân HTML tải trên trình duyệt web, nó sẽ gọi hàm từ JavaScript

cú pháp

Làm theo cú pháp bên dưới để sử dụng sự kiện onload trong thẻ

// HTML content

Ví dụ

Trong ví dụ dưới đây, chúng tôi đã tạo hàm JavaScript có tên là welcomeFunction[]. Chúng tôi đang gọi chức năng đó từ thẻ bằng sự kiện onload và nó hiển thị thông báo chào mừng trong hộp cảnh báo cho người dùng

    Call JavaScript function on page load. 

   
   
 Methods to call a JavaScript function on page load. 
   
 Call the JavaScript function on page load by using  onload  event in the HTML body tag. 
   
   

Khi người dùng chạy mã ví dụ, họ sẽ đưa ra thông báo chào mừng trong hộp cảnh báo. Khi thực hiện chức năng hoàn tất, người dùng sẽ nhận được thông báo đầu ra ở trên

Sử dụng cửa sổ. sự kiện onload trong JavaScript

Ở đây, chúng tôi có cách tiếp cận thứ hai để gọi hàm khi tải trang trong JavaScript. Theo mặc định, mọi trang web đều chứa đối tượng cửa sổ và đối tượng cửa sổ đại diện cho các biến toàn cục. Chúng ta có thể truy cập bất kỳ biến hoặc hàm toàn cục nào trong JavaScript bằng cách sử dụng đối tượng cửa sổ. Trong cách tiếp cận này, chúng ta sẽ sử dụng thuộc tính onload của đối tượng window

Bằng cách sử dụng cửa sổ. onload, người dùng có thể gọi một hàm được đặt tên hoặc liên kết một hàm ẩn danh với cửa sổ. onload và tất cả mã bên trong hàm ẩn danh sẽ được thực thi sau khi tải trang

cú pháp

Người dùng có thể làm theo cú pháp dưới đây để sử dụng cửa sổ. onload để gọi một chức năng khi tải trang

• Cú pháp cho hàm ẩn danh

Window.onload = function {
   // code to execute on the page load
}

• Cú pháp cho chức năng được đặt tên

Function simpleFunction [ ] {
   // function body
}
Window.onload = simpleFunction[ ];

Ví dụ

Trong ví dụ dưới đây, chúng tôi đang gọi hàm được đặt tên khi tải trang bằng cửa sổ. tải tài sản

    Call JavaScript function on page load. 


   
 Methods to call a JavaScript function on page load. 
   
 Call the JavaScript function on page load by using window.onload event in the JavaScript. 
   
 
   

Sử dụng Sự kiện DOMContentLoaded

JavaScript có một tính năng thú vị là trình xử lý sự kiện và người dùng có thể gọi một hàm hoặc thực hiện một số thao tác khi bất kỳ sự kiện nào kích hoạt. Trong cách tiếp cận này, chúng ta sẽ sử dụng sự kiện “DOMContentloaded”. Chúng ta sẽ gọi hàm mong muốn bằng phương thức addEventListener[] trong JavaScript. Ngoài ra, chúng tôi sẽ áp dụng trình xử lý sự kiện cho toàn bộ tài liệu để chúng tôi có thể gọi một chức năng khi tải trang

cú pháp

Để gọi sự kiện DOMContentLoaded, người dùng có thể làm theo cú pháp dưới đây

document.addEventListener["DOMContentLoaded", function[] {
   // function body
}];

Ví dụ

Ví dụ dưới đây minh họa việc sử dụng sự kiện DOMContentLoded để kích hoạt lệnh gọi hàm khi tải trang

    Call JavaScript function on page load. 

   
   
 Methods to call a JavaScript function on page load. 
   
 Call the JavaScript function on page load by using document.addEventListener[ ] method.
   
   

Người dùng cũng sẽ thấy hộp cảnh báo với thông báo khi chức năng sẽ được thực thi

Phần kết luận

Ở đây, chúng tôi đã xác định ba cách tiếp cận để kích hoạt lệnh gọi hàm khi tải trang. Cách tiếp cận đầu tiên chúng ta có thể sử dụng bên trong mã HTML, cách tiếp cận thứ hai trong mã JavaScript và cách tiếp cận thứ ba là cách tốt nhất để đạt được mục tiêu của chúng tôi

Hơn nữa, người dùng có thể thay đổi sự kiện theo cách tiếp cận thứ ba để kích hoạt chức năng trên một sự kiện cụ thể. Một điều nữa trong cách tiếp cận cuối cùng là thay vì kích hoạt trình xử lý sự kiện cho toàn bộ tài liệu, người dùng cũng có thể áp dụng nó cho một phần tử HTML cụ thể

Trong ví dụ, trình xử lý

  function ready[] {
    alert['DOM is ready'];

    // image is not yet loaded [unless it was cached], so the size is 0x0
    alert[`Image size: ${img.offsetWidth}x${img.offsetHeight}`];
  }

  document.addEventListener["DOMContentLoaded", ready];

3 chạy khi tài liệu được tải, vì vậy nó có thể xem tất cả các phần tử, bao gồm cả

  function ready[] {
    alert['DOM is ready'];

    // image is not yet loaded [unless it was cached], so the size is 0x0
    alert[`Image size: ${img.offsetWidth}x${img.offsetHeight}`];
  }

  document.addEventListener["DOMContentLoaded", ready];

4 bên dưới

Nhưng nó không đợi hình ảnh tải. Vì vậy,

  document.addEventListener["DOMContentLoaded", [] => {
    alert["DOM ready!"];
  }];





  alert["Library loaded, inline script executed"];

6 hiển thị kích thước bằng không

Thoạt nhìn, sự kiện

  function ready[] {
    alert['DOM is ready'];

    // image is not yet loaded [unless it was cached], so the size is 0x0
    alert[`Image size: ${img.offsetWidth}x${img.offsetHeight}`];
  }

  document.addEventListener["DOMContentLoaded", ready];

3 rất đơn giản. Cây DOM đã sẵn sàng – đây là sự kiện. Có một vài đặc thù mặc dù

Khi trình duyệt xử lý tài liệu HTML và gặp thẻ

  document.addEventListener["DOMContentLoaded", [] => {
    alert["DOM ready!"];
  }];





  alert["Library loaded, inline script executed"];

8, trình duyệt cần thực thi trước khi tiếp tục xây dựng DOM. Đó là một biện pháp phòng ngừa, vì các tập lệnh có thể muốn sửa đổi DOM và thậm chí

  document.addEventListener["DOMContentLoaded", [] => {
    alert["DOM ready!"];
  }];





  alert["Library loaded, inline script executed"];

9 vào đó, vì vậy

  function ready[] {
    alert['DOM is ready'];

    // image is not yet loaded [unless it was cached], so the size is 0x0
    alert[`Image size: ${img.offsetWidth}x${img.offsetHeight}`];
  }

  document.addEventListener["DOMContentLoaded", ready];

3 phải đợi

Vì vậy, DOMContentLoaded chắc chắn xảy ra sau các tập lệnh như vậy

  document.addEventListener["DOMContentLoaded", [] => {
    alert["DOM ready!"];
  }];





  alert["Library loaded, inline script executed"];

Trong ví dụ trên, đầu tiên chúng ta thấy “Library loading…”, và sau đó là “DOM sẵn sàng. ” [tất cả các tập lệnh được thực thi]

Các tập lệnh không chặn DOMContentLoaded

Có hai trường hợp ngoại lệ từ quy tắc này

1. Các tập lệnh có thuộc tính

   
       Call JavaScript function on page load. 
   
      
      
    Methods to call a JavaScript function on page load. 
      
    Call the JavaScript function on page load by using  onload  event in the HTML body tag. 
      
      
   
   

   51, chúng tôi sẽ trình bày sau một chút, không chặn

   
     function ready[] {
       alert['DOM is ready'];
   
       // image is not yet loaded [unless it was cached], so the size is 0x0
       alert[`Image size: ${img.offsetWidth}x${img.offsetHeight}`];
     }
   
     document.addEventListener["DOMContentLoaded", ready];
   
   
   

   3
2. Các tập lệnh được tạo động với

   
       Call JavaScript function on page load. 
   
      
      
    Methods to call a JavaScript function on page load. 
      
    Call the JavaScript function on page load by using  onload  event in the HTML body tag. 
      
      
   
   

   53 và sau đó được thêm vào trang web cũng không chặn sự kiện này

Các biểu định kiểu bên ngoài không ảnh hưởng đến DOM, vì vậy

  function ready[] {
    alert['DOM is ready'];

    // image is not yet loaded [unless it was cached], so the size is 0x0
    alert[`Image size: ${img.offsetWidth}x${img.offsetHeight}`];
  }

  document.addEventListener["DOMContentLoaded", ready];

3 không đợi chúng

Nhưng có một cạm bẫy. Nếu chúng ta có một tập lệnh sau kiểu, thì tập lệnh đó phải đợi cho đến khi biểu định kiểu tải

    Call JavaScript function on page load. 

   
   
 Methods to call a JavaScript function on page load. 
   
 Call the JavaScript function on page load by using  onload  event in the HTML body tag. 
   
   

5

Lý do cho điều này là tập lệnh có thể muốn lấy tọa độ và các thuộc tính phụ thuộc vào kiểu dáng khác của các phần tử, như trong ví dụ trên. Đương nhiên, nó phải đợi các kiểu tải

Khi

  function ready[] {
    alert['DOM is ready'];

    // image is not yet loaded [unless it was cached], so the size is 0x0
    alert[`Image size: ${img.offsetWidth}x${img.offsetHeight}`];
  }

  document.addEventListener["DOMContentLoaded", ready];

3 chờ các tập lệnh, giờ đây nó cũng chờ các kiểu trước chúng

Biểu mẫu tự động điền của Firefox, Chrome và Opera trên

  function ready[] {
    alert['DOM is ready'];

    // image is not yet loaded [unless it was cached], so the size is 0x0
    alert[`Image size: ${img.offsetWidth}x${img.offsetHeight}`];
  }

  document.addEventListener["DOMContentLoaded", ready];

3

Ví dụ: nếu trang có biểu mẫu có thông tin đăng nhập và mật khẩu và trình duyệt đã ghi nhớ các giá trị, thì trên

  function ready[] {
    alert['DOM is ready'];

    // image is not yet loaded [unless it was cached], so the size is 0x0
    alert[`Image size: ${img.offsetWidth}x${img.offsetHeight}`];
  }

  document.addEventListener["DOMContentLoaded", ready];

3, trình duyệt có thể cố gắng tự động điền chúng [nếu được người dùng chấp thuận]

Vì vậy, nếu

  function ready[] {
    alert['DOM is ready'];

    // image is not yet loaded [unless it was cached], so the size is 0x0
    alert[`Image size: ${img.offsetWidth}x${img.offsetHeight}`];
  }

  document.addEventListener["DOMContentLoaded", ready];

3 bị hoãn bởi các tập lệnh tải lâu, thì tính năng tự động điền cũng sẽ chờ. Bạn có thể đã thấy điều đó trên một số trang web [nếu bạn sử dụng tính năng tự động điền của trình duyệt] – các trường đăng nhập/mật khẩu không được tự động điền ngay lập tức mà sẽ có độ trễ cho đến khi trang tải đầy đủ. Đó thực sự là sự chậm trễ cho đến sự kiện

  function ready[] {
    alert['DOM is ready'];

    // image is not yet loaded [unless it was cached], so the size is 0x0
    alert[`Image size: ${img.offsetWidth}x${img.offsetHeight}`];
  }

  document.addEventListener["DOMContentLoaded", ready];

3

Sự kiện

  function ready[] {
    alert['DOM is ready'];

    // image is not yet loaded [unless it was cached], so the size is 0x0
    alert[`Image size: ${img.offsetWidth}x${img.offsetHeight}`];
  }

  document.addEventListener["DOMContentLoaded", ready];

5 trên đối tượng

Window.onload = function {
   // code to execute on the page load
}

61 kích hoạt khi toàn bộ trang được tải bao gồm các kiểu, hình ảnh và các tài nguyên khác. Sự kiện này có sẵn thông qua thuộc tính

Window.onload = function {
   // code to execute on the page load
}

62

Ví dụ bên dưới hiển thị chính xác kích thước hình ảnh, vì

Window.onload = function {
   // code to execute on the page load
}

63 chờ tất cả hình ảnh

Window.onload = function {
   // code to execute on the page load
}

6

Khi khách truy cập rời khỏi trang, sự kiện

  document.addEventListener["DOMContentLoaded", [] => {
    alert["DOM ready!"];
  }];





  alert["Library loaded, inline script executed"];

0 sẽ kích hoạt trên

Window.onload = function {
   // code to execute on the page load
}

61. Chúng tôi có thể làm điều gì đó ở đó mà không gây ra sự chậm trễ, chẳng hạn như đóng các cửa sổ bật lên có liên quan

Ngoại lệ đáng chú ý là gửi phân tích

Giả sử chúng tôi thu thập dữ liệu về cách trang được sử dụng. nhấp chuột, cuộn, khu vực trang đã xem, v.v.

Đương nhiên, sự kiện

  document.addEventListener["DOMContentLoaded", [] => {
    alert["DOM ready!"];
  }];





  alert["Library loaded, inline script executed"];

0 là khi người dùng rời khỏi chúng tôi và chúng tôi muốn lưu dữ liệu trên máy chủ của mình

Có tồn tại một phương pháp

Window.onload = function {
   // code to execute on the page load
}

67 đặc biệt cho các nhu cầu như vậy, được mô tả trong thông số kỹ thuật https. //w3c. github. io/đèn hiệu/

Nó gửi dữ liệu trong nền. Quá trình chuyển đổi sang trang khác không bị trì hoãn. trình duyệt rời khỏi trang, nhưng vẫn thực hiện

Window.onload = function {
   // code to execute on the page load
}

68

Đây là cách sử dụng nó

Function simpleFunction [ ] {
   // function body
}
Window.onload = simpleFunction[ ];

5

• Yêu cầu được gửi dưới dạng POST
• Chúng tôi không chỉ có thể gửi một chuỗi mà còn cả các biểu mẫu và các định dạng khác, như được mô tả trong chương Tìm nạp, nhưng thông thường đó là một đối tượng được xâu chuỗi hóa
• Dữ liệu bị giới hạn bởi 64kb

Khi yêu cầu

Window.onload = function {
   // code to execute on the page load
}

68 kết thúc, trình duyệt có thể đã rời khỏi tài liệu, vì vậy không có cách nào để nhận phản hồi của máy chủ [thường trống để phân tích]

Ngoài ra còn có một cờ

Function simpleFunction [ ] {
   // function body
}
Window.onload = simpleFunction[ ];

50 để thực hiện các yêu cầu "sau trang bên trái" như vậy trong phương thức tìm nạp cho các yêu cầu mạng chung. Bạn có thể tìm thêm thông tin trong chương Tìm nạp API

Nếu muốn hủy chuyển đổi sang trang khác, chúng tôi không thể thực hiện tại đây. Nhưng chúng ta có thể sử dụng một sự kiện khác –

Function simpleFunction [ ] {
   // function body
}
Window.onload = simpleFunction[ ];

51

Nếu khách truy cập bắt đầu điều hướng khỏi trang hoặc cố gắng đóng cửa sổ, trình xử lý

  function ready[] {
    alert['DOM is ready'];

    // image is not yet loaded [unless it was cached], so the size is 0x0
    alert[`Image size: ${img.offsetWidth}x${img.offsetHeight}`];
  }

  document.addEventListener["DOMContentLoaded", ready];

9 sẽ yêu cầu xác nhận bổ sung

Nếu chúng tôi hủy sự kiện, trình duyệt có thể hỏi khách truy cập xem họ có chắc chắn không

Bạn có thể thử bằng cách chạy mã này và sau đó tải lại trang

    Call JavaScript function on page load. 


   
 Methods to call a JavaScript function on page load. 
   
 Call the JavaScript function on page load by using window.onload event in the JavaScript. 
   
 
   

0

Vì lý do lịch sử, việc trả lại chuỗi không trống cũng được tính là hủy sự kiện. Cách đây một thời gian, các trình duyệt thường hiển thị nó dưới dạng tin nhắn, nhưng như đã nói, chúng không nên

Đây là một ví dụ

    Call JavaScript function on page load. 


   
 Methods to call a JavaScript function on page load. 
   
 Call the JavaScript function on page load by using window.onload event in the JavaScript. 
   
 
   

1

Hành vi đã được thay đổi vì một số quản trị viên web đã lạm dụng trình xử lý sự kiện này bằng cách hiển thị các thông báo gây hiểu lầm và gây phiền nhiễu. Vì vậy, hiện tại, các trình duyệt cũ vẫn có thể hiển thị dưới dạng thông báo, nhưng ngoài điều đó ra - không có cách nào để tùy chỉnh thông báo hiển thị cho người dùng

Function simpleFunction [ ] {
   // function body
}
Window.onload = simpleFunction[ ];

53 không hoạt động từ trình xử lý

  function ready[] {
    alert['DOM is ready'];

    // image is not yet loaded [unless it was cached], so the size is 0x0
    alert[`Image size: ${img.offsetWidth}x${img.offsetHeight}`];
  }

  document.addEventListener["DOMContentLoaded", ready];

9

Điều đó nghe có vẻ lạ, nhưng hầu hết các trình duyệt đều bỏ qua

Function simpleFunction [ ] {
   // function body
}
Window.onload = simpleFunction[ ];

53

Có nghĩa là, đoạn mã sau có thể không hoạt động

    Call JavaScript function on page load. 


   
 Methods to call a JavaScript function on page load. 
   
 Call the JavaScript function on page load by using window.onload event in the JavaScript. 
   
 
   

5

Thay vào đó, trong các trình xử lý như vậy, người ta nên đặt

Function simpleFunction [ ] {
   // function body
}
Window.onload = simpleFunction[ ];

56 thành một chuỗi để nhận được kết quả tương tự như mã ở trên

    Call JavaScript function on page load. 


   
 Methods to call a JavaScript function on page load. 
   
 Call the JavaScript function on page load by using window.onload event in the JavaScript. 
   
 
   

7

Điều gì xảy ra nếu chúng tôi đặt trình xử lý

  function ready[] {
    alert['DOM is ready'];

    // image is not yet loaded [unless it was cached], so the size is 0x0
    alert[`Image size: ${img.offsetWidth}x${img.offsetHeight}`];
  }

  document.addEventListener["DOMContentLoaded", ready];

3 sau khi tài liệu được tải?

Đương nhiên, nó không bao giờ chạy

Có những trường hợp chúng tôi không chắc tài liệu đã sẵn sàng hay chưa. Chúng tôi muốn chức năng của mình thực thi khi DOM được tải, bây giờ hoặc sau này

Thuộc tính

Function simpleFunction [ ] {
   // function body
}
Window.onload = simpleFunction[ ];

58 cho chúng ta biết về trạng thái tải hiện tại

Có 3 giá trị có thể

• Function simpleFunction [ ] {
     // function body
  }
  Window.onload = simpleFunction[ ];

  59 – tài liệu đang tải

• 
      Call JavaScript function on page load. 
  
  
     
   Methods to call a JavaScript function on page load. 
     
   Call the JavaScript function on page load by using window.onload event in the JavaScript. 
     
   
     
  
  

  00 – tài liệu đã được đọc đầy đủ

• 
      Call JavaScript function on page load. 
  
  
     
   Methods to call a JavaScript function on page load. 
     
   Call the JavaScript function on page load by using window.onload event in the JavaScript. 
     
   
     
  
  

  01 – tài liệu đã được đọc đầy đủ và tất cả tài nguyên [như hình ảnh] cũng được tải

Vì vậy, chúng tôi có thể kiểm tra

Function simpleFunction [ ] {
   // function body
}
Window.onload = simpleFunction[ ];

58 và thiết lập trình xử lý hoặc thực thi mã ngay lập tức nếu nó sẵn sàng

Như thế này

  function ready[] {
    alert['DOM is ready'];

    // image is not yet loaded [unless it was cached], so the size is 0x0
    alert[`Image size: ${img.offsetWidth}x${img.offsetHeight}`];
  }

  document.addEventListener["DOMContentLoaded", ready];

0

Ngoài ra còn có sự kiện

    Call JavaScript function on page load. 


   
 Methods to call a JavaScript function on page load. 
   
 Call the JavaScript function on page load by using window.onload event in the JavaScript. 
   
 
   

03 kích hoạt khi trạng thái thay đổi, vì vậy chúng tôi có thể in tất cả các trạng thái như thế này

  function ready[] {
    alert['DOM is ready'];

    // image is not yet loaded [unless it was cached], so the size is 0x0
    alert[`Image size: ${img.offsetWidth}x${img.offsetHeight}`];
  }

  document.addEventListener["DOMContentLoaded", ready];

1

Sự kiện

    Call JavaScript function on page load. 


   
 Methods to call a JavaScript function on page load. 
   
 Call the JavaScript function on page load by using window.onload event in the JavaScript. 
   
 
   

03 là một cơ chế thay thế để theo dõi trạng thái tải tài liệu, nó đã xuất hiện từ lâu. Ngày nay ít dùng

Hãy xem toàn bộ dòng sự kiện để biết đầy đủ

Đây là một tài liệu có

    Call JavaScript function on page load. 


   
 Methods to call a JavaScript function on page load. 
   
 Call the JavaScript function on page load by using window.onload event in the JavaScript. 
   
 
   

05,

  function ready[] {
    alert['DOM is ready'];

    // image is not yet loaded [unless it was cached], so the size is 0x0
    alert[`Image size: ${img.offsetWidth}x${img.offsetHeight}`];
  }

  document.addEventListener["DOMContentLoaded", ready];

4 và các trình xử lý ghi lại các sự kiện

  function ready[] {
    alert['DOM is ready'];

    // image is not yet loaded [unless it was cached], so the size is 0x0
    alert[`Image size: ${img.offsetWidth}x${img.offsetHeight}`];
  }

  document.addEventListener["DOMContentLoaded", ready];

2

Ví dụ hoạt động là trong sandbox

đầu ra điển hình

1. [1] trạng thái sẵn sàng ban đầu. Đang tải
2. [2] trạng thái sẵn sàng. tương tác
3. [2] Đã tải DOMContent
4. [3] tải khung nội tuyến
5. [4] img đang tải
6. [4] trạng thái sẵn sàng. hoàn chỉnh
7. [4] tải cửa sổ

Các số trong ngoặc vuông biểu thị thời gian gần đúng khi nó xảy ra. Các sự kiện được gắn nhãn với cùng một chữ số xảy ra gần như cùng một lúc [± vài mili giây]

Làm cách nào để hiển thị hộp cảnh báo trong JavaScript?

Làm cách nào để chỉ hiển thị thông báo cảnh báo một lần trong JavaScript?