Tải tập lệnh động

Question

Tôi đang tải một vài mã YUI động trong mã của tôi theo yêu cầu Ajax. DOM và trang được tải đầy đủ khi yêu cầu được đưa ra - đó là phản hồi cho sự kiện của người dùng.

Tôi thêm thẻ vào đầu, dưới dạng con. Nhưng tôi tình cờ gặp một vài vấn đề:

Tôi thêm hai tập lệnh YUI được lưu trữ tại Yahoo! CDN và một kịch bản nội tuyến của riêng tôi chịu trách nhiệm tạo đối tượng, thêm trình xử lý sự kiện và hiển thị các tiện ích YUI. Nhưng tôi khi kịch bản của tôi chạy các kịch bản YUI không được tải nhưng cho tôi lỗi và không chạy như tôi mong đợi.

Có cách để chỉ chạy tập lệnh của tôi (hoặc xác định một hàm sẽ chạy) khi mã YUI được tải đầy đủ?

Answer 1

Bạn có thể sử dụng một setTimeout() để chạy một số chức năng mà chỉ kiểm tra nếu nó nạp - kiểm tra cái gì đó như

if (typeof YUI_NAMESPACED_THING !== "undefined") runCode()

EDIT Cảm ơn, CMS

Answer 2

Bạn đã thử một sự kiện onload?

được sửa đổi: (nhờ Jamie)

var script = document.createElement("script"); 
script.type = "text/javascript"; 
script.src = src; 
//IE: 
if(window.attachEvent && document.all) { 
    script.onreadystatechange = function() { 
     if(this.readyState === "complete") { 
      callback_function(); //execute 
     } 
    }; 
} 
//other browsers: 
else { 
    script.onload = callback_function; //execute 
} 
document.getElementsByTagName("head")[0].appendChild(script); 

Answer 3

Nếu bạn đang sử dụng YUI 2.x tôi khuyên bạn nên sử dụng tiện ích YUI Get, vì nó được thiết kế để xử lý loại này của một vấn đề.

Answer 4

Nếu bạn đang tải nhiều tệp tập lệnh riêng lẻ từ Yahoo! CDN, bạn cần đảm bảo cả hai được tải trước khi thực thi mã phụ thuộc của bạn. Bạn có thể tránh điều này bằng cách sử dụng trình xử lý kết hợp. Xem Trình cấu hình để biết url của tập lệnh nên tải cả hai/tất cả các tệp YUI cần thiết từ một url.

http://developer.yahoo.com/yui/articles/hosting/

Với ý nghĩ đó, giả sử bạn phải tải các tập tin YUI không đồng bộ, bạn nên sử dụng một onload/handler onreadystatechange như ghi nhận của digitalFresh.

Tôi muốn giới thiệu các mô hình sau đây, tuy nhiên:

(function (d) { 
    var s = d.createElement('script'), 
     onEvent = ('onreadystatechange' in s) ? 'onreadystatechange' : 'onload'; 

    s[onEvent] = function() { 
     if (("loaded,complete").indexOf(this.readyState || "loaded") > -1) { 
      s[onEvent] = null; 

      // Call your code here 
      YAHOO.util.Dom.get('x').innerHTML = "Loaded"; 
     } 
    }; 

    // Set the src to the combo script url, e.g. 
    s.src = "http://yui.yahooapis.com/combo?2.8.1/..."; 

    d.getElementsByTagName('head')[0].appendChild(s); 
})(document); 

Answer 5

Nếu tôi hiểu được điều này một cách chính xác, phản ứng ajax của bạn với điều này:

<script href="yui-combo?1"></script> 
<script href="yui-combo?2"></script> 
<p>some text here</a> 
<script> 
// using some of the components included in the previous combos 
// YAHOO.whatever here... 
</script> 

Nếu đây là trường hợp, đây là một trường hợp rõ ràng trong đó bạn nên sử dụng plugin điều phối. Dispatcher sẽ mô phỏng quá trình tải trình duyệt cho các phản hồi AJAX. Về cơ bản nó sẽ tải và thực thi mọi kịch bản theo thứ tự chính xác.

Best Regards, Caridy