Javascript — Sự Khác Biệt Giữa Các Sự Kiện 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.

Đang xem: Domcontentloaded là gì

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

READ:  Gdp Là Gì? Tổng Hợp Kiến Thức Về Về Gdp Cách Tính Gdp Chính Xác

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.

Xem thêm: Đầu Số 0283 Là Mạng Gì ? Mã Vùng Ở Tỉnh Nào? Thông Tin Chi Tiết

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

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.

READ:  Vị Trí Công Việc Trong Digital Agency Là Gì ? Digital Agency Là Gì

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:

ban đầu readyState: đang tải readyState: tương tác DOMContentLoaded khi tải iframe img onload readyState: hoàn thành 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).

READ:  Amex Card Là Gì ? Những Thông Tin Cần Thiết Về Thẻ American Express

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.

Xem thêm: Top 100 Người Đẹp Trai Nhất The Giới 2020 : Sơn Tùng Có Mặt, Tiêu Chiến Đứng Đầu

6. Tóm lược

Sự kiện tải trang:

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 c-n.vn để nhận được nhiều hơn nữa:

Xem thêm bài viết thuộc chuyên mục: kiến thức chung