2008-09-03 23 views
13

Tôi có một hàm javascript điều khiển DOM khi nó được gọi (thêm các lớp CSS, v.v.). Điều này được gọi khi người dùng thay đổi một số giá trị trong một biểu mẫu. Khi tài liệu được tải đầu tiên, tôi muốn gọi hàm này để chuẩn bị trạng thái ban đầu (đơn giản hơn trong trường hợp này hơn là thiết lập DOM từ phía máy chủ đến trạng thái ban đầu chính xác).Tôi có nên sử dụng window.onload hoặc khối tập lệnh không?

Có tốt hơn khi sử dụng window.onload để thực hiện chức năng này hoặc có khối tập lệnh sau các phần tử DOM mà tôi cần sửa đổi không? Đối với cả hai trường hợp, tại sao nó tốt hơn?

Ví dụ:

function updateDOM(id) { 
    // updates the id element based on form state 
} 

tôi nên gọi nó thông qua:

window.onload = function() { updateDOM("myElement"); }; 

hay:

Cựu dường như là cách tiêu chuẩn để làm điều đó, nhưng sau này có vẻ tốt, có lẽ tốt hơn vì nó sẽ cập nhật phần tử ngay sau khi tập lệnh được nhấn và miễn là nó được đặt fter các yếu tố, tôi không thấy một vấn đề với nó.

Mọi suy nghĩ? Có một phiên bản thực sự tốt hơn phiên bản kia không?

Trả lời

4

Chắc chắn sử dụng onload. Giữ các tập lệnh của bạn tách biệt khỏi trang của bạn hoặc bạn sẽ phát điên khi cố gắng phân biệt chúng sau này.

0

Việc chụp của tôi là becauase cũ, bạn chỉ có thể có 1 chức năng window.onload, trong khi khối tập lệnh nội tuyến bạn có số n.

0

onLoad vì dễ dàng hơn để biết mã nào chạy khi trang tải lên hơn là phải đọc qua các đoạn html tìm kiếm các thẻ tập lệnh có thể thực thi.

1

Mặc dù tôi đồng ý với những người khác về cách sử dụng window.onload nếu có thể để làm sạch mã, tôi chắc chắn rằng window.onload sẽ được gọi lại khi người dùng nhấn nút quay lại trong IE, nhưng không được gọi một lần nữa trong Firefox. (Trừ khi họ thay đổi nó gần đây).

Chỉnh sửa: Tôi có thể có điều đó ngược.

Trong một số trường hợp, cần sử dụng tập lệnh nội tuyến khi bạn muốn tập lệnh của mình được đánh giá khi người dùng nhấn nút quay lại từ một trang khác, quay lại trang của bạn.

Mọi sửa đổi hoặc bổ sung cho câu trả lời này đều được chào đón ... Tôi không phải là chuyên gia về javascript.

1

@The Geek

Tôi khá chắc chắn rằng window.onload sẽ được gọi lại khi người dùng chạm vào nút quay lại trong IE, nhưng không được gọi lại trong Firefox. (Trừ khi họ thay đổi nó gần đây).

Trong Firefox, onload được gọi khi DOM tải xong bất kể cách bạn điều hướng đến một trang.

3

Một số khuôn khổ JavaScript, chẳng hạn như mootools, cung cấp cho bạn truy cập vào một sự kiện đặc biệt có tên là "domready":

Chứa các sự kiện cửa sổ 'domready', mà sẽ thực hiện khi DOM đã nạp. Để đảm bảo rằng các phần tử DOM tồn tại khi mã cố gắng truy cập chúng được thực thi, chúng phải được đặt trong sự kiện 'domready'.

window.addEvent('domready', function() { 
    alert("The DOM is ready."); 
}); 
16

Sự kiện onload được coi là cách thích hợp để làm điều đó, nhưng nếu bạn không nhớ sử dụng một thư viện javascript, $ (document) .ready jQuery() thậm chí còn tốt hơn.

$(document).ready(function(){ 
    // manipulate the DOM all you want here 
}); 

Những lợi thế là:

  1. Gọi $ (document) .ready() nhiều lần như bạn muốn đăng ký mã bổ sung để chạy - bạn chỉ có thể window.onload thiết lập một lần.
  2. $ (tài liệu) .ready() hành động xảy ra ngay khi DOM hoàn tất - window.onload phải đợi hình ảnh và như vậy.

Tôi hy vọng tôi sẽ không trở thành Chàng trai đề xuất jQuery trên mọi câu hỏi JavaScript, nhưng nó thực sự tuyệt vời.

+0

Đây là câu trả lời của bạn. Rất hữu ích để biết cả hai điểm đó! –

2

window.onload trên IE cũng chờ thông tin nhị phân tải. Nó không phải là một định nghĩa nghiêm ngặt về "khi DOM được tải". Vì vậy, có thể có độ trễ đáng kể giữa thời điểm trang được cảm nhận là được tải và khi tập lệnh của bạn bị kích hoạt. Bởi vì điều này tôi sẽ khuyên bạn nên xem xét một trong những khung công tác JS phong phú (prototype/jQuery) để xử lý việc nâng hạng nặng cho bạn.

10

Tôi đã viết rất nhiều Javascript và window.onload là cách khủng khiếp cách thực hiện. Nó giòn và đợi cho đến khi mỗi nội dung của trang đã được tải. Vì vậy, nếu một hình ảnh mất vĩnh viễn hoặc tài nguyên không hết thời gian chờ cho đến 30 giây, mã của bạn sẽ không chạy trước khi người dùng có thể xem/thao tác trang.

Ngoài ra, nếu một đoạn Javascript khác quyết định sử dụng window.onload = function() {}, mã của bạn sẽ bị thổi bay đi.

Cách thích hợp để chạy mã của bạn khi trang đã sẵn sàng đang chờ phần tử bạn cần thay đổi đã sẵn sàng/có sẵn. Nhiều thư viện JS có chức năng này như tích hợp sẵn.

Check-out:

Các vấn đề liên quan