爲什麼jQuery仍然未定義但腳本標記被加載的可能性很小？

Question

我加載jQuery的這樣：

function require(url, cb = new Function) { 
    var s = document.createElement('script'); 
    s.src = url; 
    // s.async=true; 
    // ^^^^^^^^^^^^ This is already removed, but the problem still existed. 
    s.onload = cb; 
    document.head.appendChild(s); 
    } 
    require(jquery_cdn_url, function(){ 
    try { 
     alert($); 
    } catch (e) { 
     ga('send', 'pageview', e); 
    } 
    }); 

在catch塊中的錯誤是不會發生所有的時間。但是對於一些訪問者（很小的機會），因爲我通過將信息發送給Google Analytics來追蹤這些信息。

在此問題的以前版本中，腳本具有async屬性。但是在真實的項目中，我刪除了它，並且錯誤仍然出現。

這是爲什麼發生？有什麼辦法可以避免這種情況？

一些進一步的想法：

• 的谷歌分析代碼也被加載這種方式，因此，如果onload功能不適用於某些用戶代理工作，ga()也應該送什麼給谷歌。
• 我想一種避免這種情況的方法：在try ... catch區塊中，使用類似「xxx.html？load = sync」的查詢重新加載失敗的案例。然後我在服務器端進行一些檢測，如果有load=sync查詢，那麼我會輸出帶有同步JavaScript標籤的代碼。這聽起來像是一種可能的解決方法，但並不完美，因爲它需要另一次重新加載（更多浪費的網絡請求）和一些服務器端編程工作量。

Answer 1

你不是說哪些瀏覽器的問題出現在，但支持的script標籤跨瀏覽器seems to be spotty.

的onload屬性這可以給你造成的問題看到 - 檢查用戶代理字符串以查看瀏覽器版本是否匹配。

顯然老版IE版本的正確方法是使用onreadystatechange。 Here是一個寫法，說明它是如何完成的。

要記住的另一個細節是the src attribute should be set after the onload attribute以確保onload處理程序實際上被觸發。但是，這看起來不像是你問題的原因：如果出現這種情況，處理程序根本不會被解僱。

Answer 2

的CDN網址加載到你的require功能添加腳本標記，但CDN網址將使穹頂時間來加載從網絡的js文件。它將首先發出一個獲取請求，然後將獲得包含文件內容的響應，然後才能完全加載jquery，並且可以訪問$。 雖然這也取決於您的互聯網速度。有時你會很快得到CDN js內容，有時候可能需要很長時間。

Answer 3

我做了一個fiddle它似乎工作。我認爲解決方案是將代碼放入onload事件中。你也可能是緩存清理問題，請參考this question。

window.onload = function() { 
 
    function require(url, cb = new Function) { 
 
    var s = document.createElement('script'); 
 
    s.src = url; 
 
    s.async = true; 
 
    s.onload = cb; 
 
    document.head.appendChild(s); 
 
    } 
 
    require('https://code.jquery.com/jquery-2.2.4.min.js', function(){ 
 
    alert($); //ReferenceError: $ is not defined 
 
    }); 
 
};