cách tốt nhất của tải trọng không phô trương trong javascript đơn giản

Question

cách tốt nhất không phô trương cách nào để gọi thứ gì đó sau khi trang đang được tải trong javascript thuần túy? tất nhiên trong jquery tôi sẽ sử dụng

$(document).ready(function(){...}); 

nhưng tôi không chắc chắn về cách tiếp cận đáng tin cậy nhất trong đồng bằng js.

rõ

window.onload = ... 

không phải là giải pháp thích hợp, bởi vì nó sẽ ghi đè lên tuyên bố lúc trước.

những gì tôi đang cố gắng làm là chèn khung nội tuyến vào div sau khi trang được tải, nhưng có thể có những cách thực sự tốt hơn để thực hiện. Kế hoạch của tôi là làm một cái gì đó như

window.onload = function(divId){ 
var div = document.getElementById(divId); 
div.innerHTML = "<iframe src='someUrl' .. >"; 
} 

EDIT: xin lỗi vì không bao gồm tất cả các chi tiết cần thiết. Tập lệnh không dành cho trang web của tôi - ý tưởng là hiển thị một phần của trang web của tôi (biểu mẫu) trên các trang web bên ngoài. Ưu tiên là giảm thiểu nỗ lực mà người khác phải đưa vào sử dụng mã của tôi. Đó là lý do tại sao tôi muốn giữ mọi thứ trong tệp js và hoàn toàn không có gì trong <script> - ngoại trừ <script src="http://my.website/code.js" />. Nếu tôi thay đổi url của iframe hoặc tôi muốn thêm một số tính năng, tôi muốn cập nhật mã trên tất cả các trang web khác mà không yêu cầu họ thực hiện bất kỳ thay đổi nào.
Cách tiếp cận của tôi có thể sai - mọi đề xuất đều rất được hoan nghênh.

Answer 1

//For modern browsers: 
document.addEventListener("DOMContentLoaded", someFunction, false); 

//For IE: 
document.attachEvent("onreadystatechange", someFunction); 

`attachEvent` and `addEventListener` allow you to register more than one event listener for a particular target. 

Xem: https://developer.mozilla.org/en/DOM/element.addEventListener

Cũng chắc chắn là giá trị xem xét cách jQuery làm nó: http://code.jquery.com/jquery-1.7.js Tìm kiếm bindReady.

Answer 2

Chỉ cần đặt kịch bản của bạn bao gồm ít phút cuối của tài liệu, ngay trước hoặc sau khi kết thúc </body> thẻ, ví dụ:

(content) 
(content) 
<script src="http://my.website/code.js"></script> 
</body> 
</html> 

Tất cả các đánh dấu trên kịch bản sẽ có thể truy cập thông qua các phương pháp DOM thông thường (reference). Rõ ràng, không phải tất cả các tài nguyên phụ trợ (hình ảnh và như vậy) sẽ được tải đầy đủ, nhưng có lẽ đó là lý do tại sao bạn muốn tránh sự kiện windowload (nó xảy ra quá muộn).

Các chỉ mục đích thực sự của ready sự kiện kiểu là nếu bạn không kiểm soát mà kịch bản được đưa vào (ví dụ, các thư viện) hoặc bạn cần phải có một cái gì đó thực trước để tải trang và cái gì khác sau tải trang và bạn muốn tránh có hai yêu cầu HTTP (ví dụ: đối với hai tập lệnh khác nhau, một tập lệnh trước khi tải và một sau).

Answer 3

Sử dụng window.addEventListener và các sự kiện load hoặc DOMContentLoaded:

window.addEventListener('DOMContentLoaded',function(){alert("first handler");}); 
window.addEventListener('DOMContentLoaded',function(){alert("second handler");}); 

object.addEventListener('event',callback) sẽ chèn một event listener vào một hàng đợi cho rằng sự kiện đối tượng cụ thể. Xem https://developer.mozilla.org/en/DOM/element.addEventListener để biết thêm thông tin.

Để sử dụng IE5-8 window.attachEvent('event',callback), hãy xem http://msdn.microsoft.com/en-us/library/ms536343%28VS.85%29.aspx. Bạn có thể xây dựng cho mình một hàm helper nhỏ:

function addEventHandler(object,szEvent,cbCallback){ 
    if(typeof(szEvent) !== 'string' || typeof(cbCallback) !== 'function') 
     return false; 
    if(!!object.addEventListener){ // for IE9+ 
     return object.addEventListener(szEvent,cbCallback); 
    } 
    if(!!object.attachEvent){ // for IE <=8 
     return object.attachEvent(szEvent,cbCallback); 
    } 
    return false; 
} 
addEventHandler(window,'load',function(){alert("first handler");}); 
addEventHandler(window,'load',function(){alert("second handler");}); 

Lưu ý rằng DOMContentLoaded không được định nghĩa trong IE ít 9. Nếu bạn không biết trình duyệt của người nhận của bạn sử dụng các sự kiện load.