Chào mừng bạn đến với hướng dẫn nhanh về cách chạy Javascript sau khi tải trang. Gặp một số rắc rối với các phần tử, biến hoặc hàm bị thiếu?
Các cách phổ biến để chạy Javascript sau khi tải trang là
- Thêm một trình lắng nghe sự kiện –
7Run Javascript On Page Load // [A] JAVASCRIPT FUNCTION function demo [] { document.getElementById["myTxt"].style.color = "green"; }Hello world!
- Thêm onload vào thẻ body –
8Run Javascript On Page Load // [A] JAVASCRIPT FUNCTION function demo [] { document.getElementById["myTxt"].style.color = "green"; }Hello world!
- Trì hoãn kịch bản –
9Run Javascript On Page Load // [A] JAVASCRIPT FUNCTION function demo [] { document.getElementById["myTxt"].style.color = "green"; }Hello world!
- Cuối cùng, đặt tập lệnh ở cuối trang – Mặc dù đây không hoàn toàn là “sau khi tải trang”
Điều đó bao gồm những điều cơ bản, nhưng chúng ta hãy xem qua một số ví dụ chi tiết trong hướng dẫn này. đọc tiếp
ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã nguồn ví dụ khi bắt đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào
TRANG TRÌNH BÀY NHANH
Tải xuống & Ghi chú
TẢI XUỐNG & LƯU Ý
Đầu tiên, đây là liên kết tải xuống mã ví dụ như đã hứa
GHI CHÚ NHANH
Nếu bạn phát hiện ra một lỗi, hãy bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với cả thế giới… Nếu bạn cần câu trả lời gấp, vui lòng xem danh sách các trang web của tôi để được trợ giúp về lập trình
MÃ VÍ DỤ TẢI XUỐNG
Nhấp vào đây để tải xuống mã nguồn, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên mã nguồn hoặc sử dụng nó trong dự án của riêng bạn
THỰC HIỆN TRÊN TẢI TRANG
Được rồi, bây giờ chúng ta hãy đi vào các cách và ví dụ về cách chạy Javascript khi tải trang
1] NGƯỜI NGHE SỰ KIỆN
1-sự kiện-người nghe. html
Run Javascript On Page Load
// [A] RUN THIS ON PAGE LOAD
window.addEventListener["load", [] => {
document.getElementById["myTxt"].style.color = "red";
}];
Hello world!
Các sự kiện sẽ khá dễ hiểu, ngay cả khi bạn chưa bao giờ nghe nói về chúng trước đây. Chúng được kích hoạt bất cứ khi nào có điều gì đó thú vị xảy ra – Nhấp chuột, cuộn, nhấn phím, phát video, v.v. Trong ví dụ này, chúng tôi lắng nghe sự kiện
Run Javascript On Page Load
// [A] JAVASCRIPT FUNCTION
function demo [] {
document.getElementById["myTxt"].style.color = "green";
}
Hello world!
P. S. Bạn cũng có thể nhắm mục tiêu sự kiện
Run Javascript On Page Load
// [A] JAVASCRIPT FUNCTION
function demo [] {
document.getElementById["myTxt"].style.color = "green";
}
Hello world!
Run Javascript On Page Load
// [A] JAVASCRIPT FUNCTION
function demo [] {
document.getElementById["myTxt"].style.color = "green";
}
Hello world!
Run Javascript On Page Load
// [A] JAVASCRIPT FUNCTION
function demo [] {
document.getElementById["myTxt"].style.color = "green";
}
Hello world!
2] CƠ THỂ TRÊN TẢI
2-tải. html
Run Javascript On Page Load
// [A] JAVASCRIPT FUNCTION
function demo [] {
document.getElementById["myTxt"].style.color = "green";
}
Hello world!
Chà, kiểu này cũng tương tự như đính kèm
Run Javascript On Page Load
// [A] JAVASCRIPT FUNCTION
function demo [] {
document.getElementById["myTxt"].style.color = "green";
}
Hello world!
Run Javascript On Page Load
// [A] JAVASCRIPT FUNCTION
function demo [] {
document.getElementById["myTxt"].style.color = "green";
}
Hello world!
3] TRÌ HOÃN TẢI TẬP ĐOẠN
3a-hoãn. js
document.getElementById["myTxt"].style.color = "blue";3b-hoãn. html
Run Javascript On Page Load
Hello world!
Có, chỉ cần thêm
Run Javascript On Page Load
// [A] JAVASCRIPT FUNCTION
function demo [] {
document.getElementById["myTxt"].style.color = "green";
}
Hello world!
Run Javascript On Page Load
// [A] JAVASCRIPT FUNCTION
function demo [] {
document.getElementById["myTxt"].style.color = "green";
}
Hello world!
Run Javascript On Page Load
// [A] JAVASCRIPT FUNCTION
function demo [] {
document.getElementById["myTxt"].style.color = "green";
}
Hello world!
Run Javascript On Page Load
// [A] JAVASCRIPT FUNCTION
function demo [] {
document.getElementById["myTxt"].style.color = "green";
}
Hello world!
4 về cơ bản sẽ chỉ tải Javascript khi trang HTML hoàn tấtRun Javascript On Page Load // [A] JAVASCRIPT FUNCTION function demo [] { document.getElementById["myTxt"].style.color = "green"; }Hello world!
7 không gây rối với thứ tự tải của tập lệnh, nó chỉ chạy chức năng được chỉ định khi trang đã sẵn sàngRun Javascript On Page Load // [A] JAVASCRIPT FUNCTION function demo [] { document.getElementById["myTxt"].style.color = "green"; }Hello world!
P. S. Xin lưu ý rằng
Run Javascript On Page Load
// [A] JAVASCRIPT FUNCTION
function demo [] {
document.getElementById["myTxt"].style.color = "green";
}
Hello world!
4] ĐOẠN VĂN BẢN Ở DƯỚI [KHÔNG HOÀN TOÀN SAU KHI TẢI TRANG]
4 đáy. html
Run Javascript On Page Load
// [A] JAVASCRIPT FUNCTION
function demo [] {
document.getElementById["myTxt"].style.color = "green";
}
Hello world!
Cuối cùng, chỉ cần đặt các tập lệnh ở cuối trang. Đây không hoàn toàn là "sau khi tải trang", nhưng nó là.. Sau khi mọi thứ khác gần được tải
BIT & LIÊN KẾT HỮU ÍCH
Đó là tất cả cho hướng dẫn này và đây là một phần nhỏ về một số tính năng bổ sung và liên kết có thể hữu ích cho bạn
PHƯƠNG PHÁP NÀO LÀ TỐT NHẤT?
Cá nhân tôi thường sẽ sử dụng
document.getElementById["myTxt"].style.color = "blue";
Run Javascript On Page Load
// [A] JAVASCRIPT FUNCTION
function demo [] {
document.getElementById["myTxt"].style.color = "green";
}
Hello world!
LIÊN KẾT và THAM KHẢO
- Đang tải – MDN
- Sự kiện – API Web – MDN
- Trang. DOMContentLoaded, load, beforeunload, unload – Javascript. thông tin
BẢNG CHEAT INFOGRAPHIC
Cảm ơn bạn đã đọc, và chúng tôi đã đi đến phần cuối của hướng dẫn này. Tôi hy vọng rằng nó đã giúp bạn với dự án của bạn và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, xin vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc