Làm cách nào để áp dụng onload trong HTML?

The onload in Javascript is responsible for loading objects within a web page, it occurs when the web page is loaded and needs the loading of other important elements. The onload in javascript is compatible with loading elements like CSS files, images, script files, etc. within a web page. The onload events are one of the most used and primarily part of the tag. Another advantage is the ability of the onload event to deal with web cookies. One of the practical use of onload method is letting the onload event read and verify the browser details before loading the web page.

Gói phát triển phần mềm tất cả trong một(hơn 600 khóa học, hơn 50 dự án)

Giá
Xem khóa học

600+ Khóa học trực tuyến. hơn 50 dự án. Hơn 3000 giờ. Giấy chứng nhận có thể kiểm chứng. Truy cập Trọn đời
4. 6 (84.712 xếp hạng)

Mỗi khi một trang web được tải, có một số yếu tố và sự kiện xảy ra trong nền, tải một số đối tượng và khung. Quá trình tải các thành phần trang web này rất quan trọng vì chúng mang dữ liệu

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, kiểm thử phần mềm và những thứ khác

cú pháp

Có rất ít phương thức và hàm có nhiều cú pháp. Onload có ba cách chính để triển khai và các cú pháp tương ứng. Cú pháp tiêu chuẩn để triển khai onload trong javascript như sau

object.onload = funct() {samScript};

Giải trình. Cú pháp trên là cách cơ bản để triển khai sự kiện onload trong tệp javascript. Nó bắt đầu với một đối tượng, bất kỳ đối tượng nào, theo nhu cầu. Tiếp theo là từ khóa onload, bạn sẽ nhận thấy nó được truyền với dấu chấm ở giữa, nghĩa là đối tượng kéo dài sự kiện onload. Sau đó, chúng tôi có chức năng của mình, theo nhu cầu của chúng tôi, theo sau là một tập lệnh sẽ được thực thi

tải trong HTML

Cú pháp onload trong HTML hoạt động với dấu ngoặc như bất kỳ thẻ nào khác. Cú pháp như sau

Giải trình. Trong ngoặc là phần tử của chúng ta, mà chúng ta có thể nói là phần tử như hình ảnh hoặc tập lệnh khác cho CSS hoặc Javascript

Và cú pháp thứ ba cho onload là một phần cải tiến của cú pháp javascript, nó như sau

object.addEventListener("load", samScript);

Giải trình. Tương tự như cú pháp cơ bản, nó bắt đầu bằng một đối tượng theo sau là trình xử lý sự kiện và trong dấu ngoặc đơn, hãy chuyển đến từ khóa tải và tập lệnh hoặc phần tử sẽ được tải

Ghi chú. addEventListener()  không hỗ trợ các phiên bản Internet Explorer cũ hơn 9

Sự kiện onload hoạt động như thế nào trong JavaScript?

Hàm onload hoạt động như một trình xử lý sự kiện cho tất cả các đối tượng sẽ được tải trên trang web. cửa sổ này. onload thích hợp là một phần mặc định của trình duyệt. Hàm onload chịu trách nhiệm tải toàn bộ trang web, tất cả các tập lệnh và thành phần của nó

Nó được gọi là onload vì nó tải trang web và các thành phần của nó, trước các hàm. Đó là lý do tại sao nó cũng có thể được gọi là trình xử lý sự kiện vì nó quản lý toàn bộ trang web. Bây giờ chúng ta đã hiểu onload là gì và cú pháp của nó, hãy thực hiện nó

Ví dụ để triển khai tải JavaScript

Dưới đây là một số ví dụ về sự kiện onload

Ví dụ 1

Đối với ví dụ đầu tiên của chúng tôi, chúng tôi sẽ triển khai chức năng tải trong tập lệnh Javascript, trong một trang web html

Mã số

A simple example to demonstrate onload event along with iframe.

đầu ra

Giải trình. Bắt đầu với tất cả các thẻ bắt buộc cho trang web HTML, sau đó chúng tôi có thẻ nội dung, trong nội dung đoạn đầu tiên của chúng tôi, in một thông báo đơn giản làm bằng chứng về mã được thực thi tốt. Sau đó, chúng tôi có khung nội tuyến của mình, có id là samFrame và sau đó là nguồn của tệp hình ảnh mà chúng tôi định tải trong khung này. Nguồn hình ảnh được theo sau bởi chiều cao và chiều rộng. Sau đó, chúng tôi có một đoạn khác chỉ cần giữ id cho mã. Sau đó, tập lệnh của chúng tôi bắt đầu, với thẻ quan trọng là tài liệu cùng với việc lấy phần tử theo id. Đối với id, chúng tôi đã chuyển id iframe hình ảnh của mình. Sau đó, kết nối là sự kiện tải của chúng tôi, gọi hàm và tập lệnh. Cuối cùng, chúng tôi có một chức năng khác, đơn giản là đi theo id mà chúng tôi đã xác định trước đó và in một thông báo đơn giản về việc tải khung nội tuyến. Cuối cùng, chúng tôi đã kết thúc tất cả các thẻ của mình

Ví dụ #2

Bây giờ, ví dụ đầu tiên của chúng tôi đã được thực thi, nơi chúng tôi đã sử dụng onload trong javascript. Đối với ví dụ tiếp theo của chúng tôi, chúng tôi đã triển khai cú pháp kiểu HTML, trong một trang web bình thường. Mã này như sau

Mã số

đầu ra

Sau khi cảnh báo được hiển thị, khi chúng tôi nhấp vào nút OK, hình ảnh mà chúng tôi định tải trong trang web sẽ được tải, như thể hiện trong hình ảnh bên dưới

Giải trình. Bắt đầu bằng thẻ HTML DOCTYPE, cho biết phần đầu của mã trang web. Sau đó, chúng tôi bắt đầu các thẻ HTML và body, với ý định tải hình ảnh của chúng tôi ở giữa trang web, chúng tôi sử dụng thẻ trung tâm. Sau đó, câu lệnh onload của chúng ta bắt đầu bằng một nguồn cho hình ảnh mà chúng ta định tải, theo sau là từ khóa onload trỏ đến hàm loadIma. Sau đó, chúng tôi có chiều rộng và chiều cao được đề cập theo nhu cầu của chúng tôi. Kết thúc thẻ trung tâm, chúng tôi bắt đầu với thẻ script, thẻ này chứa hàm loadIma. Chức năng này yêu cầu một cảnh báo, sẽ được hiển thị sau khi hình ảnh được tải. Cuối cùng, kết thúc cho tất cả các thẻ của chúng tôi

Phần kết luận

Mỗi trang web tải số lượng sự kiện và đối tượng, onload chịu trách nhiệm tải các đối tượng này. Tải lên hoạt động với HTML và javascript, nó có thể được chuyển vào thẻ HTML cũng như tập lệnh. Onload có thể tải hình ảnh, tệp CSS và bất kỳ tệp script nào trong trang web theo nhu cầu. Hơn nữa, quá trình tải lên cũng xử lý cookie web

Bài viết được đề xuất

Đây là hướng dẫn về tải JavaScript. Ở đây chúng tôi thảo luận về phần giới thiệu về JavaScript onload, cú pháp, cách thức hoạt động của nó và các ví dụ về mã và đầu ra. Bạn cũng có thể xem qua các bài viết liên quan khác của chúng tôi để tìm hiểu thêm –

Làm cách nào để sử dụng hàm onload trong HTML?

Những thẻ nào có thể sử dụng onload?

Reply 9 0 Chia sẻ