Domcontentloaded là gì

DOMContentLoaded- trình để mắt đang download không thiếu HTML với cây DOM được chế tạo ra, tuy vậy các tài nguyên ổn phía bên ngoài nlỗi hình họa
*
Trong ví dụ, trình giải pháp xử lý DOMContentLoaded chạy Khi tài liệu được sở hữu, bởi vậy nó rất có thể thấy toàn bộ những bộ phận, bao hàm cả
*

3. window.onunload

khi khách hàng truy cập ra khỏi trang, sự kiện unload sẽ kích hoạt window. Chúng ta hoàn toàn có thể làm điều gì đó mà không tương quan tới việc lừ đừ, ví dụ như đóng những cửa sổ nhảy lên có liên quan.

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

Ngoại lệ xứng đáng chú ý là gửi so sánh.

Giả sử chúng ta tích lũy tài liệu về phong thái trang được sử dụng: bấm chuột, cuộn, vùng trang sẽ coi, v.v.

Đương nhiên, sự kiện unload là lúc người dùng rời khỏi họ cùng bọn họ ao ước lưu lại dữ liệu bên trên máy chủ của chính bản thân mình.


Có một phương pháp navigator.sendBeacon(url, data) đặc trưng mang lại mọi nhu yếu điều này, được trình bày trong đặc tả https://w3c.github.io/beacon/ .

Nó gửi dữ liệu trong nền. Quá trình đổi khác thanh lịch trang không giống không biến thành trì hoãn: trình ưng chuẩn rời khỏi trang, tuy nhiên vẫn thực hiện sendBeacon.

Đây là bí quyết thực hiện 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 số lượng giới hạn vày 64kb.Lúc trải đời sendBeacon xong, trình để mắt tới có thể đã bong khỏi tư liệu, vì chưng vậy không có cách làm sao để nhận ra ý kiến của dòng sản phẩm nhà (thường xuyên trống nhằm phân tích).

Cũng có một cờ keepalive nhằm tiến hành những hưởng thụ “sau trang mặt trái” điều này trong phương thức search hấp thụ cho các từng trải mạng bình thường. quý khách rất có thể tra cứu thêm thông báo trong cmùi hương Tìm nạp API .

Nếu chúng ta ao ước diệt thay đổi thanh lịch trang không giống, chúng ta bắt buộc triển khai tại chỗ này. Nhưng bạn có thể thực hiện một sự kiện khác – onbeforeunload.

4. window.onbeforeunload

Nếu khách hàng truy vấn ban đầu điều hướng khỏi trang hoặc nỗ lực ngừng hoạt động sổ, trình giải pháp xử lý beforeunload vẫn thưởng thức xác nhận bổ sung cập nhật.

Nếu chúng ta bỏ sự khiếu nại, trình duyệt y rất có thể hỏi khách truy vấn xem chúng ta có chắc hẳn rằng không.

Bạn có thể test nó bằng phương pháp chạy code này và tiếp nối mua lại trang:

window.onbeforeunload = function() return false;;Vì nguyên do lịch sử hào hùng, trả về một chuỗi không trống cũng khá được tính là hủy sự khiếu nại. Một thời gian trước, những trình xem xét thường xuyên hiển thị nó dưới dạng một thông tin, mà lại như thông số kỹ thuật chuyên môn tiến bộ cho thấy thêm, bọn chúng không nên.


Đây là 1 trong ví dụ:

window.onbeforeunload = function() return "There are unsaved changes. Leave sầu now?";;Hành vi đã bị thay đổi vì một trong những quản lí trị viên web vẫn lạm dụng trình cách xử trí sự kiện này bằng phương pháp hiển thị những thông tin gây hiểu nhầm và tạo phiền hậu nhiễu. Vì vậy, ngay bây giờ các trình xem xét cũ vẫn có thể hiển thị nó bên dưới dạng thông tin, dẫu vậy ngoài điều ấy – không tồn tại phương pháp làm sao để cấu hình thiết lập thông tin hiển thị cho những người cần sử dụng.

Xem thêm: Pcs Là Gì? Phân Biệt Tất Cả Các Khái Niệm Về Pcs Pcs Là Viết Tắt Của Đơn Vị Gì

5. readyState

Điều gì xảy ra ví như họ đặt trình cách xử lý DOMContentLoaded sau khoản thời gian tư liệu được tải?

Đương nhiên, nó ko bao giờ chạy.

Có số đông ngôi trường phù hợp họ không chắc hẳn liệu tài liệu vẫn chuẩn bị sẵn sàng tuyệt chưa. Chúng ta mong mỏi hàm của bọn họ xúc tiến Khi DOM được thiết lập, mặc dù cho là hiện nay hoặc sau này.

Các ở trong tính document.readyState mang lại chúng ta biết về triệu chứng sở hữu hiện hành.

Có 3 giá trị hoàn toàn có thể có:

“loading” – tài liệu vẫn download.“interactive” – tư liệu đã có được hiểu không thiếu thốn.“complete” – tài liệu đã được gọi không thiếu thốn cùng toàn bộ tài nguyên (như hình ảnh) cũng được tải.

Vì vậy, chúng ta có thể chất vấn document.readyState và tùy chỉnh thiết lập một trình cách xử lý hoặc triển khai code ngay chớp nhoáng nếu nó sẽ chuẩn bị sẵn sàng.

Nhỏng cầm cố này:

function work() /*...*/ if (document.readyState == "loading") // still loading, wait for the event document.addEventListener("DOMContentLoaded", work); else // DOM is ready! work();Bên cạnh đó còn có sự kiện readystatechange kích hoạt Lúc tinh thần chuyển đổi, vị vậy chúng ta có thể in tất cả những tâm trạng 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à 1 trong nguyên tắc thay thế theo dõi trạng thái download tài liệu, nó vẫn xuất hiện từ rất lâu. Ngày ni, nó ít được thực hiện.

Hãy coi toàn cục cái sự kiện để biết sự không thiếu.

Dưới đó là một tài liệu cùng với

*
lấy ví dụ làm việc là vào vỏ hộp cat .

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

<1> thuở đầu readyState: đã tải<2> readyState: tương tác<2> DOMContentLoaded<3> Khi thiết lập iframe<4> img onload<4> readyState: hoàn thành<4> window onload

Các số trong ngoặc vuông thể hiện thời gian sát đúng vào lúc nó xảy ra. Các sự khiếu nại tất cả nhãn cùng một chữ số xẩy ra gần như cùng một dịp (± vài ba mili giây).

document.readyState trsinh hoạt bắt buộc ảnh hưởng đúng trước đó là DOMContentLoaded. Hai vấn đề đó thực sự có nghĩa tương tự nhau.document.readyState xong Khi tất cả tài nguyên ( iframe với img) được cài. Tại đây bạn có thể thấy rằng nó xẩy ra trong vòng thời hạn giống hệt như img.onload( img là tài nguyên ổn cuối cùng) với window.onload. Chuyển sang tâm trạng complete có nghĩa là y như window.onload. Sự khác biệt là nó window.onload luôn chuyển động sau toàn bộ những trình cách xử trí load không giống.

6. Tóm lược

Sự kiện download trang:

Sự kiện DOMContentLoaded đang kích hoạt document Lúc DOM chuẩn bị sẵn sàng. Chúng ta rất có thể vận dụng JavaScript cho những bộ phận nghỉ ngơi tiến độ này.Tập lệnh chẳng hạn như or chặn DOMContentLoaded, trình coi ngó chờ chúng triển khai.Tấm hình và những tài nguyên khác vẫn rất có thể tiếp tục download.Sự kiện load bên trên window đang kích hoạt lúc trang cùng tất cả tài nguyên ổn được cài đặt. Chúng tôi hiếm khi thực hiện nó, bởi vì hay ko bắt buộc đợi quá lâu.Sự khiếu nại beforeunload trên window kích hoạt Khi người dùng ước ao rời ra khỏi trang. Nếu chúng ta diệt sự kiện, trình ưng chuẩn sẽ hỏi liệu người dùng gồm thực sự muốn tránh đi hay là không (ví dụ: chúng ta gồm những đổi khác không được lưu).Sự kiện unload window kích hoạt Khi người tiêu dùng sau cuối rời đi, trong trình cách xử trí, bọn họ chỉ hoàn toàn có thể làm đầy đủ câu hỏi đơn giản và dễ dàng ko liên quan tới việc chậm rãi hoặc kinh nghiệm người dùng. Vì giảm bớt kia, nó hiếm lúc được thực hiện. Chúng ta hoàn toàn có thể gửi hưởng thụ mạng cùng với navigator.sendBeanhỏ.document.readyState là tinh thần hiện thời của tư liệu, các thay đổi rất có thể được quan sát và theo dõi trong readystatechange trường hợp:loading – tư liệu sẽ cài đặt.interactive- tư liệu được đối chiếu cú pháp, xẩy ra cùng lúc với DOMContentLoaded tuy nhiên trước nó.complete – tư liệu cùng tài ngulặng được thiết lập, xảy ra đồng thời cùng với window.onload nhưng mà trước nó.

Xem thêm: Mã Số Địa Điểm Kinh Doanh Là Gì, Địa Điểm Kinh Doanh Là Gì

Nguồn cùng tài liệu giờ đồng hồ anh tham khảo:

Full series tự học Javascript trường đoản cú cơ phiên bản tới nâng cao trên trên đây nha.

Nếu các bạn thấy giỏi cùng có ích, chúng ta có thể tđắm đuối gia những kênh sau của kinhdientamquoc.vn để nhấn được không ít hơn nữa:


Chuyên mục: Hỏi Đáp