2012-07-20 24 views
5

Tôi muốn sử dụng Head JS để tự động tải tất cả các tập lệnh khác cho các trang của mình. Tôi đang lập kế hoạch sử dụng phiên bản được lưu trữ bởi CDNJS để tận dụng bộ nhớ cache tốt hơn, giảm độ trễ, v.v.Cách tải javascript từ CDN với dự phòng cục bộ trong <head>

Tôi không có lý do gì để nghĩ rằng CDNJS sẽ hoạt động ở bất kỳ đâu, nhưng ngay cả đối với các tệp được lưu trữ trên Google CDN như jQuery, I muốn bao gồm dự phòng. Khi tôi đang sử dụng jQuery mặc dù, các tập tin được bao gồm ở phần cuối của thẻ <body>. Do tính chất của JS Trưởng, tôi cần phải bao gồm nó trong <head> của trang của tôi.

Trong <body> Tôi sẽ sử dụng hai dòng như thế này:

<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.96/head.min.js"></script> 
<script> window.head || document.write('<script src="js/libs/head-0.96.min.js"><\/script>') </script> 

Tôi có thể sử dụng thiết lập này tương tự các dòng trong đầu như một dự phòng? Sẽ không document.write() ghi đè lên toàn bộ trang của tôi? Không kịch bản tải khác nhau khi chúng tồn tại trong <head> do thứ tự mà các trình duyệt phân tích cú pháp DOM?

Tôi vẫn còn khá mới mẻ với điều này, vì vậy mọi hướng dẫn sẽ cực kỳ hữu ích! Cảm ơn!

+1

document.write chỉ hủy tài liệu của bạn nếu bạn cố gắng thực hiện sau khi tải trang đã hoàn tất. Một document.write trực tuyến sẽ thực thi khi trang được tải/phân tích cú pháp và chỉ cần chèn dữ liệu văn bản vào tài liệu. –

+0

có, nhưng sẽ không phải các cuộc gọi tải JS đầu nằm trong ' lửa _before_ tập lệnh tải từ một document.write? – stevenem

+0

chỉ khi bạn đã đánh dấu thẻ tập lệnh trước là 'async'. Nếu không, các tập lệnh sẽ được tải đồng bộ. –

Trả lời

0

Như bạn có thể đã biết, bạn sẽ không thử nghiệm cho window.jQuery nhưng một số chức năng được bao gồm trong head.js.

Ngoài ra, bạn nói đúng rằng bạn có thể không muốn sử dụng document.write() hai lần tại đây.

Thay vì document.write(), hãy thử này:

function appendScript(url) { 
    var head = document.getElementsByTagName('head')[0]; 
    var theScript = document.createElement('script'); 
    theScript.type = 'text/javascript'; 
    theScript.src = url; 
    theScript.onreadystatechange = callback; 
    theScript.onload = callback; 
    head.appendChild(theScript); 
} 

Đối với các url, sử dụng dự phòng địa phương của bạn.

+0

Cảm ơn bạn đã chỉ ra phần jQuery! Tôi sẽ cung cấp cho một này một shot! Làm cách nào để thiết lập gọi lại để chạy các lệnh 'head.js()' sau khi JS được nạp? – stevenem

+0

Tôi không chắc chắn, tôi không biết nhiều về head.js nhưng tôi không biết nếu bạn có thể đảm bảo điều này sẽ chạy trước hoặc sau head.js theo thiết kế. –

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