DOMContentLoaded- trình chu đáo đã tải đầy đủ HTML cùng 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ử trí DOMContentLoaded chạy khi tài liệu được tải, bở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. Bạn có thể làm điều gì đó mà không tương quan đến sự chậm rãi trễ, ví dụ như đóng các cửa sổ nhảy lên gồm liên quan.
Bạn đang xem: Domcontentloaded là gì
Đang xem: Domcontentloaded là gì
Ngoại lệ đáng chăm chú là gửi phân tích.
Giả sử họ thu thập dữ liệu về kiểu cách trang được sử dụng: nhấp chuột, cuộn, vùng trang đang xem, v.v.
Đương nhiên, sự khiếu nại unload là khi người tiêu 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 trưng cho những nhu cầu như vậy, được biểu đạt trong quánh tả https://w3c.github.io/beacon/ .
Nó gửi tài liệu trong nền. Thừa trình biến hóa sang trang khác không trở nên trì hoãn: trình duyệt ra khỏi trang, tuy nhiên 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 số lượng giới hạn bởi 64kb.Khi yêu mong sendBeacon kết thúc, trình duyệt có thể đã ra khỏi tài liệu, vì vậy không có cách như thế nào để cảm nhận phản hồi của dòng sản phẩm chủ (thường trống nhằm phân tích).
Cũng gồm một cờ keepalive để thực hiện các yêu cầu “sau trang mặt trái” bởi vậy trong cách làm tìm nạp cho những yêu cầu mạng chung. Chúng ta có thể tìm thêm tin tức trong chương tra cứu nạp API .
Nếu họ muốn hủy biến hóa sang trang khác, họ không thể triển khai ở đây. Nhưng bạn cũng có thể sử dụng một sự kiện khác – onbeforeunload.
READ: Tái Hôn Là Gì ? những Quy Định Của luật pháp Về kết giao Kết Hôn Là Gì
4. window.onbeforeunload
Nếu khách hàng truy cập bước đầu điều hướng khỏi trang hoặc nỗ lực đóng cửa ngõ sổ, trình cách xử trí beforeunload đã yêu cầu xác thực bổ sung.
Nếu bọn họ hủy sự kiện, trình duyệt rất có thể hỏi khách truy vấn xem họ có chắc chắn là không.
Bạn hoàn toàn có thể thử nó bằng phương pháp 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 khá được tính là diệt sự kiện. Một thời gian trước, những trình phê duyệt thường hiển thị nó dưới dạng một thông báo, cơ mà như thông số kỹ thuật tiến bộ cho biết, chúng không nên.
Đây là 1 ví dụ:
window.onbeforeunload = function() return “There are unsaved changes. Leave now?”;;Hành vi đang bị thay đổi do một số trong những quản trị viên web đang lạm dụng trình xử lý sự kiện này bằng cách hiển thị các thông tin gây hiểu lầm và khiến phiền nhiễu. Vì chưng vậy, ngay hiện nay các trình ưng chuẩn cũ vẫn rất có thể hiển thị nó bên dưới dạng thông báo, mà lại ngoài điều ấy – không có cách như thế nào để tùy chỉnh thông báo hiển thị cho những người dùng.
5. readyState
Điều gì xảy ra nếu bọn họ đặt trình cách xử lý DOMContentLoaded sau thời điểm tài liệu được tải?
Đương nhiên, nó không khi nào chạy.
Có phần đa trường hợp bọn họ không kiên cố liệu tài liệu đã chuẩn bị hay chưa. Chúng ta muốn hàm của bọn họ thực thi khi DOM được tải, cho dù là bây giờ hoặc sau này.
Các ở trong tính document.readyState cho bọn họ biết về tình trạng mua hiện hành.
Có 3 giá chỉ trị hoàn toàn có thể có:
READ: Giá gốc Tiếng Anh Là Gì - trường đoản cú Điển Thuật Ngữ giờ đồng hồ Anh Kế Toán đề nghị Biết
“loading” – tài liệu vẫn tải.“interactive” – tài liệu đã làm được đọc đầy đủ.“complete” – tài liệu đã có được đọc rất đầy đủ và tất cả tài nguyên (như hình ảnh) cũng khá được tải.
Vì vậy, bạn cũng có thể kiểm tra document.readyState và tùy chỉnh thiết lập một trình xử trí hoặc thực thi code ngay lập tức nếu nó sẽ sẵn sàng.
Như nạm này:
function work() /*…*/ if (document.readyState == “loading”) // still loading, wait for the sự kiện document.addEventListener(“DOMContentLoaded”, work); else // DOM is ready! work();Ngoài ra còn tồn tại sự kiện readystatechange kích hoạt khi trạng thái cụ đổi, vì chưng vậy bạn cũng có thể in tất cả các tâm lý này như sau:
// current stateconsole.log(document.readyState);// print state changesdocument.addEventListener(“readystatechange”, () => console.log(document.readyState));Sự khiếu nại readystatechange này là 1 cơ chế sửa chữa theo dõi trạng thái tải tài liệu, nó đã xuất hiện thêm từ lâu. Ngày nay, nó không nhiều được sử dụng.
Hãy xem toàn thể dòng sự kiện để tìm hiểu sự đầy đủ.
Dưới đấy là một tài liệu với
Ví dụ thao tác làm việc là trong hộp mèo .
Đầu ra điển hình:
lúc đầu readyState: đang tải readyState: liên can DOMContentLoaded khi tải iframe img onload readyState: xong xuôi window onload
Các số trong ngoặc vuông bộc lộ thời gian gần đúng vào khi nó xảy ra. Những sự kiện tất cả nhãn cùng một chữ số xảy ra gần như cùng một cơ hội (± vài mili giây).
document.readyState trở nên liên hệ đúng trước đấy là DOMContentLoaded. Hai điều đó thực sự bao gồm nghĩa tương đương nhau.document.readyState kết thúc khi toàn bộ tài nguyên ( iframe cùng img) được tải. Ở đây chúng ta có thể thấy rằng nó xảy ra trong vòng thời gian hệt như img.onload( img là tài nguyên cuối cùng) với window.onload. Gửi sang tâm trạng complete có nghĩa là giống như window.onload. Sự biệt lập là nó window.onload luôn chuyển động sau toàn bộ các trình giải pháp xử lý load khác.
READ: đơn vị Thầu Là Gì - nhà Thầu Phụ Là Gì
6. Tóm lược
Sự kiện cài trang:
Sự kiện DOMContentLoaded vẫn kích hoạt document khi DOM sẵn sàng. Bạn có thể áp dụng JavaScript mang lại các phần tử ở quá trình này.Tập lệnh chẳng hạn như or chặn DOMContentLoaded, trình duyệt hóng chúng thực thi.Hình hình ảnh và các tài nguyên không giống vẫn hoàn toàn có thể tiếp tục tải.Sự kiện load bên trên window vẫn kích hoạt khi trang và tất cả tài nguyên được tải. Shop chúng tôi hiếm khi áp dụng nó, vị thường không đề nghị đợi vượt lâu.Sự kiện beforeunload bên trên window kích hoạt khi người tiêu dùng muốn rời khỏi trang. Nếu bọn họ hủy sự kiện, trình chuẩn y sẽ hỏi liệu người tiêu dùng có thực sự hy vọng rời đi hay là không (ví dụ: họ có các biến đổi chưa được lưu).Sự khiếu nại unload window kích hoạt khi bạn dùng sau cuối rời đi, trong trình xử lý, họ chỉ có thể làm gần như việc đơn giản và dễ dàng không tương quan đến sự chậm rãi hoặc yêu cầu tín đồ dùng. Vì giảm bớt đó, nó hiếm khi được sử dụng. Chúng ta có thể gửi yêu mong mạng cùng với navigator.sendBeacon.document.readyState là trạng thái hiện tại của tài liệu, các biến hóa có thể được quan sát và theo dõi trong readystatechange trường hợp:loading – tài liệu đang tải.interactive- tài liệu được so với cú pháp, xẩy ra cùng cơ hội với DOMContentLoaded cơ mà trước nó.complete – tài liệu với tài nguyên được tải, xẩy ra cùng cơ hội với window.onload nhưng trước nó.
Xem thêm: Cách Bấm Máy Tính Tích Có Hướng, Cách Tính Tích Có Hướng Bằng Máy Tính 580Vnx,
Nguồn và tài liệu giờ đồng hồ anh tham khảo:
Full series tự học tập Javascript từ cơ bạn dạng tới nâng cấp tại trên đây nha.
Nếu chúng ta thấy hay và hữu ích, bạn cũng có thể tham gia những kênh sau của amiralmomenin.net nhằm nhận được rất nhiều hơn nữa:
Post navigation
Previous: bạn Đã Biết mạng internet Banking Là Gì, lý giải Đăng ký Internet Banking những Ngân Hàng
Next: Nêu công việc Chèn Hình Ảnh Vào Văn bạn dạng Vào Chèn Hình Ảnh nhằm mục tiêu Mục Đích Gì