Trang: DOMContentLoaded, tải, tải trước, tải xuống – js khi tải tài liệu

Trong chương này, chúng ta khám phá các sự kiện tải trang, chẳng hạn như DOMContentLoaded, tải, tải trước, tải xuống. Tìm hiểu khi nào chúng kích hoạt và những gì hữu ích cho.

Bạn đang xem : js khi tải tài liệu

Ngày nay, các trình duyệt đôi khi tạm dừng các trang hoặc hủy bỏ hoàn toàn chúng, trong trường hợp tài nguyên hệ thống bị hạn chế. May mắn thay, có những móc vòng đời hiện đại giúp xử lý những can thiệp như vậy mà không ảnh hưởng đến trải nghiệm người dùng.

Có ba sự kiện quan trọng trong khuôn khổ vòng đời của trang HTML :

  • DOMContentLoaded: sự kiện khi trình duyệt tải hoàn toàn HTML, cây DOM được thiết lập nhưng các tài nguyên bên ngoài, chẳng hạn như ảnh & lt; img & gt; và các bảng định kiểu có thể chưa được tải.
  • tải: sự kiện khi không chỉ HTML được tải mà còn các tài nguyên bên ngoài khác (ví dụ: hình ảnh, bảng định kiểu, v.v.).
  • beforeunload: sự kiện khi người dùng rời khỏi trang.

Mỗi sự kiện ở trên đều có thể hữu ích cho một mục đích cụ thể:

  • DOMContentLoaded: khi DOM đã sẵn sàng, trình xử lý có thể tìm kiếm các nút DOM và khởi tạo giao diện.
  • tải: các tài nguyên bên ngoài được tải, do đó các kiểu được áp dụng, kích thước của hình ảnh được biết đến, v.v.
  • beforeunload: người dùng sắp thoát ra ngoài và không thể kiểm tra xem người dùng sau đã lưu các thay đổi hay chưa, đồng thời yêu cầu đảm bảo rằng người dùng có thực sự muốn rời đi hay không.
  • dỡ bỏ: người dùng gần như đã rời đi, nhưng không thể bắt đầu một số thao tác (ví dụ: gửi số liệu thống kê).

Ngoài ra, hãy đi vào chi tiết.

DOMContentLoaded

Sự kiện này xảy ra trên đối tượng tài liệu.

Bạn nên sử dụng addEventListener để bắt nó, như sau:

  document.addEventListener ("DOMContentLoaded", sẵn sàng);
// không phải là "document.onDOMContentLoaded = ..."  

Đây là một ví dụ mở rộng về việc sử dụng addEventListener:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

img

id

=

" img "

src

=

" / uploads / media / default / 0001/05 / e9f3899d915c17845be51e839d5ba238f0404b07. png "

& gt;

& lt;

script

& gt;

function

sẵn sàng

(

)

{ alert (

'DOM đã sẵn sàng'

); alert (

`Kích thước hình ảnh:

$ {img.offsetWidth}

x

$ {img .offsetHeight}

`

); }

document

.addEventListener (

"DOMContentLoaded"

, đã sẵn sàng);

& lt; /

script

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Trong ví dụ trên, DOMContentLoaded chạy sau khi tài liệu được tải. Vì vậy, nó có thể nhìn thấy tất cả các phần tử, bao gồm & lt; img & gt ;.

Tuy nhiên, lưu ý rằng nó không bao giờ đợi tải hình ảnh. Do đó, cảnh báo sẽ hiển thị kích thước bằng không.

Sự kiện DOMContentLoaded trông rất đơn giản ngay từ cái nhìn đầu tiên. Tuy nhiên, sự kiện xảy ra khi cây DOM đã sẵn sàng.

Tuy nhiên, có một vài điểm đặc biệt tồn tại mà chúng tôi sẽ đề cập thêm.

DOMContentLoaded và Scripts

Khi tài liệu xử lý tài liệu HTML và chuyển qua & lt; script & gt; , nó sẽ thực thi trước khi tiếp tục thiết lập DOM. Nó giống như một biện pháp phòng ngừa vì các tập lệnh có thể muốn sửa đổi DOM và hơn thế nữa, document.write vào đó. Do đó, DOMContentLoaded nên đợi.

Vì vậy, sự kiện DOMContentLoaded xảy ra sau các tập lệnh như sau:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

script

src

=

" https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js "

& gt;

& lt; /

script

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

script

& gt;

document

.addEventListener (

"DOMContentLoaded"

,

() = & gt ;

{ alert (

"DOM đã sẵn sàng!"

); }); alert (

"Thư viện được tải, tập lệnh nội tuyến được thực thi"

);

& lt; /

script

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Như bạn có thể nhận thấy từ ví dụ trên, đầu tiên là “Đã tải thư viện…”, chỉ sau đó là “DOM sẵn sàng”.

Xem Thêm  css border-top-left-radius - bán kính đường viền trên cùng bên trái

Xin lưu ý rằng có những ngoại lệ đối với quy tắc này. Có nghĩa là, các tập lệnh có thuộc tính async không bao giờ chặn DOMContentLoaded. Các tập lệnh được tạo động bằng document.createElement (‘script’) và được thêm vào trang web sau đó, cũng không chặn sự kiện này.

DOMContentLoaded và Styles

DOM không bị ảnh hưởng bởi các biểu định kiểu bên ngoài, vì vậy DOMContentLoaded không đợi chúng.

Nhưng có một nhược điểm ở đây. Nếu có một tập lệnh sau kiểu, thì tập lệnh sẽ đợi cho đến khi tải biểu định kiểu, như thế này:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

script

src

=

" https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js "

& gt;

& lt; /

script

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

script

& gt;

alert (getComputedStyle (

document

.body) .marginTop);

& lt; /

script

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Điều đó xảy ra vì tập lệnh có thể muốn nhận tọa độ hoặc các thuộc tính phụ thuộc kiểu khác. Vì vậy, nó nên đợi cho kiểu tải.
Như thể DOMContentLoaded đang đợi các tập lệnh, nó cũng sẽ đợi các kiểu trước chúng.

Tự động điền của trình duyệt được tích hợp sẵn

Chrome, Opera và Firefox có thể tự động điền biểu mẫu trên DOMContentLoaded.
Ví dụ: nếu có một biểu mẫu trang có thông tin đăng nhập và mật khẩu và trình duyệt ghi nhớ các giá trị, thì trình duyệt có thể cố gắng tự động điền chúng trên DOMContentLoaded (nó phải được người dùng chấp thuận).

Ngoài ra, nếu DOMContentLoaded bị tạm ngưng bởi các tập lệnh tải lâu, thì quá trình tự động điền cũng sẽ đợi. Trong một số trang web (trong trường hợp sử dụng tính năng tự động điền của trình duyệt), các trường đăng nhập và mật khẩu không được tự động điền cùng một lúc. Có sự chậm trễ cho đến khi trang được tải hoàn toàn. Đó là sự chậm trễ cho đến sự kiện DOMContentLoaded.

Window.onload

Bây giờ, hãy nói về sự kiện tải. Sự kiện này trên đối tượng cửa sổ sẽ kích hoạt khi toàn bộ trang được tải, liên quan đến hình ảnh, kiểu và các tài nguyên khác. Sự kiện tải có sẵn thông qua thuộc tính onload.

Trong ví dụ bên dưới, bạn có thể thấy kích thước hình ảnh, vì window.onload đang đợi hình ảnh tổng thể:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

script

src

=

" https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js "

& gt;

& lt; /

script

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

script

& gt;

window

.onload =

function

(

)

{ alert (

'Trang được tải'

); alert (

`Kích thước hình ảnh:

$ {img.offsetWidth}

x

$ {img .offsetHeight}

`

); };

& lt; /

script

& gt;

& lt;

img

id

=

" img "

src

=

" / uploads / media / default / 0001/05 / e9f3899d915c17845be51e839d5ba238f0404b07. png "

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Window.onunload

Sự kiện dỡ bỏ kích hoạt trên cửa sổ khi khách truy cập rời khỏi trang. Bạn có thể làm điều gì đó mà không bao gồm thời gian trễ (ví dụ: đóng cửa sổ bật lên có liên quan). Gửi số liệu phân tích được coi là một ngoại lệ đáng chú ý.

Hãy tưởng tượng, bạn muốn thu thập dữ liệu về cách trang được sử dụng: cuộn, nhấp chuột, v.v. Theo quy luật, sự kiện dỡ tải là khi người dùng rời khỏi trang và bạn muốn lưu dữ liệu trên máy chủ. Một phương thức Navigator.sendBeacon (url, dữ liệu) duy nhất tồn tại cho những nhu cầu như vậy. Nó có thể gửi dữ liệu xuống nền. Ngoài ra, không có sự chậm trễ trong quá trình chuyển đổi sang một trang khác vẫn đang thực hiện sendBeacon.

Đây là một ví dụ về việc sử dụng sendBeacon:

  đối tượng let analyticsData = {/ * với dữ liệu được thu thập * /};
window.addEventListener ("dỡ bỏ", function () {
      Navigator.sendBeacon ("/ analytics", JSON.stringify (analyticsData));
    };  

Vì vậy, trong ví dụ trên:

  1. Yêu cầu được chuyển tiếp dưới dạng ĐĂNG.
  2. Có thể gửi không chỉ một chuỗi mà còn gửi các biểu mẫu và các định dạng khác.
  3. Có giới hạn dữ liệu: 64kb.
Xem Thêm  Cách thực thi thủ tục được lưu trữ trong SQL Server - làm thế nào để chạy một thủ tục được lưu trữ trong sql

Khi yêu cầu sendBeacon kết thúc, trình duyệt có thể đã rời khỏi tài liệu. Do đó, không có cách nào để nhận được phản hồi của máy chủ (đối với phân tích, nó thường trống).

Ngoài ra, bạn có thể sử dụng keepalive để thực hiện các yêu cầu “sau trang bên trái” trong phương thức tìm nạp cho các yêu cầu mạng chung.

Để hủy chuyển đổi sang một trang khác, bạn có thể sử dụng một sự kiện khác: onbeforeunload.

Window.onbeforeunload

Nếu người dùng đã bắt đầu điều hướng khỏi trang hoặc có ý định đóng cửa sổ, tệp tải trước sẽ yêu cầu xác nhận bổ sung. Trong trường hợp hủy bỏ sự kiện, trình duyệt sẽ hỏi người dùng xem họ có chắc chắn không.
Xem cách thực hiện bằng cách chạy đoạn mã sau và tải lại trang, như được hiển thị bên dưới:

  window.onbeforeunload = function () {
       trả về sai;
      };  

Một điều thú vị cần lưu ý: trả về một chuỗi không rỗng cũng được coi là hủy bỏ sự kiện. Trước đây, các trình duyệt thường hiển thị nó dưới dạng một thông báo, nhưng đặc điểm kỹ thuật hiện đại không cho phép điều đó.

Hãy xem một ví dụ:

  window.onbeforeunload = function () {
  return "Những thay đổi bạn đã thực hiện có thể không được lưu. Rời khỏi trang web?";
};  

Lý do thay đổi hành vi là một số quản trị viên web đã lạm dụng trình xử lý sự kiện bằng cách hiển thị các thông báo gây phiền nhiễu. Tuy nhiên, các trình duyệt cũ có thể hiển thị thông báo, nhưng không có cách nào để tùy chỉnh thông báo.

ReadyState

Thuộc tính document.readyState thông báo về trạng thái tải hiện tại.

Có thể phân biệt ba giá trị:

  • “đang tải”: trạng thái tải tài liệu.
  • “tương tác” “tương tác”: tài liệu được đọc hoàn toàn.
  • “hoàn thành”: tài liệu được đọc hoàn toàn và tất cả các tài nguyên đã được tải.

Vì vậy, bạn có thể kiểm tra document.readyState và thiết lập trình xử lý, thực thi mã ngay lập tức khi mã sẵn sàng.

Đây là một ví dụ về việc sử dụng document.readyState:

 function work () {/*...*/}
if (document.readyState == 'loading') {
  // đang tải, đợi sự kiện
  document.addEventListener ('DOMContentLoaded', cơ quan);
} khác {
  // DOM đã sẵn sàng!
  công việc();
}  

Bạn cũng có thể sử dụng sự kiện readystatechange, được kích hoạt khi trạng thái thay đổi. Vì vậy, tất cả các trạng thái có thể được in như sau:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

script

& gt;

alert (

document

.readyState);

document

.addEventListener (

'readystatechange'

,

() = & gt ;

alert (

document

.readyState));

& lt; /

script

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Vì vậy, sự kiện này là một cách thay thế để theo dõi trạng thái tải tài liệu. Tuy nhiên, ngày nay, nó không được sử dụng thường xuyên.

Toàn bộ quy trình sự kiện sẽ giống như sau:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

iframe

src

=

" iframe.html "

onload

=

" log ('iframe onload') " & gt;

& lt; /

iframe

& gt;

& lt;

img

src

=

" / uploads / media / default / 0001/05 / e9f3899d915c17845be51e839d5ba238f0404b07.png "

id

=

" img "

& gt;

& lt;

script

& gt;

log (

'ban đầu readyState:'

+

document

.readyState);

document

.addEventListener (

'readystatechange'

,

() = & gt ;

log (

'readyState:'

+

document

.readyState));

document

.addEventListener (

'DOMContentLoaded'

,

() = & gt ;

log (

'DOMContentLoaded'

));

window

.onload =

() = & gt;

log (

' tải cửa sổ '

); img.onload =

() = & gt;

log (

'img onload'

);

& lt; /

script

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Ví dụ trên bao gồm & lt; iframe & gt ;, & lt; img & gt ;, cũng như các trình xử lý để ghi nhật ký sự kiện.

Tóm tắt

Hãy tóm tắt khi nào các sự kiện tải trang kích hoạt và những gì chúng có thể hữu ích.

Tóm lại, tải trang sự kiện như sau:

  • Sự kiện DOMContentLoaded xảy ra trên tài liệu khi DOM sẵn sàng. Vì vậy, JavaScript có thể được áp dụng cho các phần tử ở giai đoạn này.
  • Sự kiện tải trên cửa sổ xảy ra khi trang và tất cả các tài nguyên được tải. Theo quy luật, nó hiếm khi được sử dụng.
  • Sự kiện tải trước được kích hoạt trên cửa sổ khi người dùng có ý định rời khỏi trang. Trong khi 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.
  • Sự kiện dỡ hàng sẽ kích hoạt khi người dùng rời đi.
  • Và cuối cùng, 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 cơ chế sẵn sàng ở các trạng thái sau: đang tải (tài liệu đang ở trạng thái tải), tương tác (tài liệu được phân tích cú pháp), hoàn thành (tài liệu và các tài nguyên đang tải).


Xem thêm những thông tin liên quan đến chủ đề js khi tải tài liệu

Working with Tables in the Word JavaScript API

  • Tác giả: Sigma Coding
  • Ngày đăng: 2020-01-21
  • Đánh giá: 4 ⭐ ( 1820 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Inside VBA, we have the ability to control different objects that can be found inside a Word Document. One of those objects is a table, which can be used to store data and summarize findings. In this video, we will cover those same table objects but now from the perspective of the JavaScript API for Word.

    Video Resources:
    ————————————————–
    Resource: GitHub File
    Link: https://github.com/areed1192/sigma_coding_youtube/tree/master/javascript/office-api-word/Working%20With%20A%20Table%20Object.ts

    Resources:
    ————————————————–
    Facebook Page: https://www.facebook.com/codingsigma
    Facebook Group: https://www.facebook.com/groups/sigmacoding
    GitHub Sigma Coding: https://github.com/areed1192/sigma_coding_youtube

    Support Sigma Coding:
    ————————————————–
    Patreon: https://patreon.com/sigmacoding
    Amazon Associates: https://amzn.to/3bsTI5P **

    Related Topics:
    ————————————————–
    Title: How to Work With a Document in the Word JavaScript API
    Link: https://youtu.be/22P43aerrho

    Title: Working With Lists in the Word JavaScript API
    Link: https://youtu.be/IBaTQ_qRaak

    Title: Working with Tables in the Word JavaScript API
    Link: https://youtu.be/9u6MGqf1J_I

    **Amazon Associates Disclosure:
    ————————————————–
    I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com. One of the ways I support the channel is by using Amazon Associates to earn fees on purchases you make. That means when you use the link above, it will track any purchases made from that link and give a small portion of it to the Sigma Coding. I love this approach because it allows you to do what you’re already doing (shopping) but also helps support the channels you care about. Also, it makes it where I can invest that revenue to help improve and grow the channel.

    Tags:
    ————————————————–
    Word JavaScriptAPI ListObjets

Tài liệu javascript

  • Tác giả: text.xemtailieu.net
  • Đánh giá: 5 ⭐ ( 2539 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Xemtailieu là thư viện tại liệu, giáo trình, bài giảng, ebook, khoá luận dành cho học tập.

Cách load file js (Javascript) sau khi trang tải xong

  • Tác giả: vinasupport.com
  • Đánh giá: 5 ⭐ ( 2993 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Làm cách nào để load và đồng bộ file js (Javascript) sau khi trang web tải xong sử dụng defer. Load scripts after page has loaded? Asynchronous

JQuery Ajax và cách sử dụng jQuery Ajax để tải dữ liệu không cần tải lại trang

  • Tác giả: tuandc.com
  • Đánh giá: 5 ⭐ ( 8884 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Tai liệu JavaScript

  • Tác giả: khotrithucso.com
  • Đánh giá: 5 ⭐ ( 7983 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tài liệu Tai liệu JavaScript có mã là 585490, file định dạng doc, có 64 trang, dung lượng file 626 kb.Tài liệu thuộc chuyên mục: Tài liệu chuyên ngành > Công Nghệ Thông Tin > Căn Bản

Tài liệu học lập trình Javascript tiếng Việt (2022)

  • Tác giả: vntalking.com
  • Đánh giá: 3 ⭐ ( 9898 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Tổng hợp tài liệu học Node JS từ cơ bản tới nâng cao

  • Tác giả: freetuts.net
  • Đánh giá: 3 ⭐ ( 3408 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: NodeJS là một nền tảng dựa vào Chrome Javascript runtime để xây dựng các ứng dụng nhanh, có độ lớn. NodeJS sử dụng các phần phát sinh các sự kiện (event-driven),.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình