Domcontentloaded là gì

DOMContentLoaded- trình duyệt đã tải đầy đủ HTML và cây DOM được tạo, nhưng các tài nguyên bên ngoài như ảnh Trong ví dụ, trình xử lý DOMContentLoaded chạy khi tài liệu được tải, vì vậy nó có thể thấy tất cả các phần tử, bao gồm cả

3. window.onunload

Khi khách truy cập rời khỏi trang, sự kiện unload sẽ kích hoạt window. Chúng ta có thể làm điều gì đó mà không liên quan đến sự chậm trễ, chẳng hạn như đóng các cửa sổ bật lên có liên quan.

Bạn đang xem: Domcontentloaded là gì

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

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

Đương nhiên, sự kiện unload là khi người dùng rời khỏi chúng ta và chúng ta muốn lưu dữ liệu trên máy chủ của mình.

Có một phương pháp navigator.sendBeacon(url, data) đặc biệt cho những nhu cầu như vậy, được mô tả trong đặc tả https://w3c.github.io/beacon/ .

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 sendBeacon.

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

let analyticsData = { /* object with gathered data */ };window.addEventListener("unload", function() { navigator.sendBeacon("/analytics", JSON.stringify(analyticsData));};Yêu cầu được gửi dưới dạng POST.Dữ liệu được giới hạn bởi 64kb.Khi yêu cầu sendBeacon 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 được phản hồi của máy chủ (thường trống để phân tích).

Cũng có một cờ keepalive để 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 chúng ta muốn hủy chuyển đổi sang trang khác, chúng ta không thể thực hiện ở đây. Nhưng chúng ta có thể sử dụng một sự kiện khác – onbeforeunload.

4. window.onbeforeunload

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ý beforeunload sẽ yêu cầu xác nhận bổ sung.

Nếu chúng ta 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ử nó bằng cách chạy code này và sau đó tải lại trang:

window.onbeforeunload = function() { return false;};Vì lý do lịch sử, trả về một chuỗi không trống cũng được tính là hủy sự kiện. Một thời gian trước, các trình duyệt thường hiển thị nó dưới dạng một thông báo, nhưng như thông số kỹ thuật hiện đại cho biết, chúng không nên.

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

window.onbeforeunload = function() { return "There are unsaved changes. Leave now?";};Hành vi đã bị thay đổi do 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, ngay bây giờ các trình duyệt cũ vẫn có thể hiển thị nó dưới dạng thông báo, nhưng ngoài điều đó – không có cách nào để tùy chỉnh thông báo hiển thị cho người dùng.

Xem thêm: Ý Nghĩa Của Màu Trắng Là Gì ? Màu Trắng Thể Hiện Cho Điều Gì?

5. readyState

Điều gì xảy ra nếu chúng ta đặt trình xử lý DOMContentLoaded 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 ta không chắc liệu tài liệu đã sẵn sàng hay chưa. Chúng ta muốn hàm của chúng ta thực thi khi DOM được tải, dù là bây giờ hoặc sau này.

Các thuộc tính document.readyState cho chúng ta biết về tình trạng tải hiện hành.

Có 3 giá trị có thể có:

“loading” – tài liệu đang tải.“interactive” – tài liệu đã được đọc đầy đủ.“complete” – 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 ta có thể kiểm tra document.readyState và thiết lập một trình xử lý hoặc thực thi code ngay lập tức nếu nó đã sẵn sàng.

Như thế này:

function work() { /*...*/ }if (document.readyState == "loading") { // still loading, wait for the event document.addEventListener("DOMContentLoaded", work);} else { // DOM is ready! work();}Ngoài ra còn có sự kiện readystatechange kích hoạt khi trạng thái thay đổi, vì vậy chúng ta có thể in tất cả các trạng thái này như sau:

// current stateconsole.log(document.readyState);// print state changesdocument.addEventListener("readystatechange", () => console.log(document.readyState));Sự kiện readystatechange này 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, nó ít được sử dụng.

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

Dưới đây là một tài liệu với

Ví dụ làm việc là trong hộp cát .

Đầu ra điển hình:

<1> ban đầu readyState: đang tải<2> readyState: tương tác<2> DOMContentLoaded<3> khi tải iframe<4> img onload<4> readyState: hoàn thành<4> window onload

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ó nhãn cùng một chữ số xảy ra gần như cùng một lúc (± vài mili giây).

document.readyState trở nên tương tác đúng trước đây là DOMContentLoaded. Hai điều này thực sự có nghĩa giống nhau.document.readyState hoàn thành khi tất cả tài nguyên ( iframe và img) được tải. Ở đây chúng ta có thể thấy rằng nó xảy ra trong khoảng thời gian giống như img.onload( img là tài nguyên cuối cùng) và window.onload. Chuyển sang trạng thái complete có nghĩa là giống như window.onload. Sự khác biệt là nó window.onload luôn hoạt động sau tất cả các trình xử lý load khác.

6. Tóm lược

Sự kiện tải trang:

Sự kiện DOMContentLoaded sẽ kích hoạt document khi DOM sẵn sàng. Chúng ta có thể áp dụng JavaScript cho các phần tử ở giai đoạn này.Tập lệnh chẳng hạn như or chặn DOMContentLoaded, trình duyệt đợi chúng thực thi.Hình ảnh và các tài nguyên khác vẫn có thể tiếp tục tải.Sự kiện load trên window sẽ kích hoạt khi trang và tất cả tài nguyên được tải. Chúng tôi hiếm khi sử dụng nó, vì thường không cần đợi quá lâu.Sự kiện beforeunload trên window kích hoạt khi người dùng muốn rời khỏi trang. Nếu chúng ta hủy sự kiện, trình duyệt sẽ hỏi liệu người dùng có thực sự muốn rời đi hay không (ví dụ: chúng ta có các thay đổi chưa được lưu).Sự kiện unload window kích hoạt khi người dùng cuối cùng rời đi, trong trình xử lý, chúng ta chỉ có thể làm những việc đơn giản không liên quan đến sự chậm trễ hoặc yêu cầu người dùng. Vì hạn chế đó, nó hiếm khi được sử dụng. Chúng ta có thể gửi yêu cầu mạng với navigator.sendBeacon.document.readyState là trạng thái hiện tại của tài liệu, các thay đổi có thể được theo dõi trong readystatechange trường hợp:loading – tài liệu đang tải.interactive- tài liệu được phân tích cú pháp, xảy ra cùng lúc với DOMContentLoaded nhưng trước nó.complete – tài liệu và tài nguyên được tải, xảy ra cùng lúc với window.onload nhưng trước nó.

Xem thêm:

Nguồn và tài liệu tiếng anh tham khảo:

Full series tự học Javascript từ cơ bản tới nâng cao tại đây nha.

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của hufa.edu.vn để nhận được nhiều hơn nữa: