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 Show
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ẻ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ápLà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. 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ápNgườ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
Window.onload = function { // code to execute on the page load }
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. Sử dụng Sự kiện DOMContentLoadedJavaScript 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. 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ý 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ả 4 bên dướiNhưng nó không đợi hình ảnh tải. Vì vậy, 6 hiển thị kích thước bằng khôngThoạt nhìn, sự kiện 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ẻ 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í 9 vào đó, vì vậy 3 phải đợiVì vậy, DOMContentLoaded chắc chắn xảy ra sau các tập lệnh như vậy
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
Các biểu định kiểu bên ngoài không ảnh hưởng đến DOM, vì vậy 3 không đợi chúngNhư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.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 3 chờ các tập lệnh, giờ đây nó cũng chờ các kiểu trước chúngBiểu mẫu tự động điền của Firefox, Chrome và Opera trên 3Ví 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 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 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 3Sự kiện 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 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 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ìnhCó 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
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ý 9 sẽ yêu cầu xác nhận bổ sungNế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.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.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
Đ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.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.7 Điều gì xảy ra nếu chúng tôi đặt trình xử lý 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ể
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 0Ngoài ra còn có sự kiện Call JavaScript function on page load.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 1Sự kiện Call JavaScript function on page load.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.05, 4 và các trình xử lý ghi lại các sự kiện 2Ví dụ hoạt động là trong sandbox đầu ra điển hình
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?Phương thức alert() trong JavaScript được sử dụng để hiển thị hộp cảnh báo ảo . Nó chủ yếu được sử dụng để đưa ra một thông báo cảnh báo cho người dùng. Nó hiển thị hộp thoại cảnh báo bao gồm một số thông báo được chỉ định (không bắt buộc) và nút OK. Khi hộp thoại bật lên, chúng ta phải nhấp vào "OK" để tiếp tục.
Làm cách nào để chỉ hiển thị thông báo cảnh báo một lần trong JavaScript?Đặt cookie khi bạn hiển thị cảnh báo . Sau đó, nếu cookie được đặt, bạn sẽ biết không hiển thị lại cảnh báo. Nếu nó không được đặt, bạn biết rằng bạn chưa hiển thị cảnh báo và nên làm như vậy ngay bây giờ. Bạn có thể đọc về cách đặt cookie trong JavaScript tại đây. |