在一個書籤

Question

在CoffeeScript中使用jQuery UI，雖然這個代碼幾乎是相同的JavaScript：

tabs_html = "<div id='nm-container'><ul><li><a href='#tabs-1'>Guidelines</a></li><li><a href='#tabs-2'>Test</a></li></ul> 
      <div id='tabs-1'><p>something1</p></div><div id='tabs-2'><p>something2</p></div></div>" 
$("#nm-toolbar").append(tabs_html) 
$("#nm-container").tabs() 

它不工作。有趣的是，它試圖在最後一行：$("#nm-container").tabs()從控制檯。我附上下面的完整代碼。請注意，我使用CoffeeMarklet來生成小書籤，該小書籤似乎只能在Chrome上使用。

s1 = window.document.createElement('script') 
s1.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' 
window.document.body.appendChild(s1) 

$ -> 

    s2 = window.document.createElement('script') 
    s2.src = 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js' 
    window.document.body.appendChild(s2) 

    jqueryUIcss = window.document.createElement('link') 
    jqueryUIcss.rel = 'stylesheet' 
    jqueryUIcss.type = 'text/css' 
    jqueryUIcss.href = 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/blitzer/jquery-ui.css' 
    window.document.head.appendChild(jqueryUIcss) 

    if $("#nm-toolbar").length == 0 
     toolbar = "<div id='nm-toolbar'></div>" 
     $("body").append(toolbar) 
     $("#nm-toolbar").css({ 
      'background':    '#fafafa', 
      'height':     '500px', 
      'width':     '400px', 
      'position':     'fixed', 
      'bottom':     '0px', 
      'right':     '20px', 
      'padding':     '5px' 
     }) 

     tabs_html = "<div id='nm-container'><ul><li><a href='#tabs-1'>Guidelines</a></li><li><a href='#tabs-2'>Test</a></li></ul> 
      <div id='tabs-1'><p>something1</p></div><div id='tabs-2'><p>something2</p></div></div>" 
     $("#nm-toolbar").append(tabs_html) 
     $("#nm-container").tabs() 

Answer 1

我懷疑問題是你是異步加載jQuery UI。該生產線

window.document.body.appendChild(s2) 

開始加載jQuery UI的，但你的代碼會繼續jQuery用戶界面已經得到一定加載之前。這可以解釋爲什麼代碼中的tabs()調用失敗，但是在腳本有時間加載後從控制檯執行調用時會成功。

您應該能夠通過從回調

s2.onreadystatechange = -> 
    return unless @readyState is 'complete' 
    # the rest of the code goes here 

編輯使你的代碼運行的其餘部分解決這一問題：對於這個問題，你真的應該做同樣的事情與s1，要不然$ ->調用可能會失敗。它成功的事實表明，無論是在瀏覽器中緩存jQuery，還是在頁面上都已經有jQuery。您還應該使用noConflict以避免覆蓋該頁面現有的jQuery版本。 Acorn鏈接的Run jQuery Code Bookmarklet完成所有這些事情（並且以比這個答案中的代碼更具跨瀏覽器的方式）。

Answer 2

這應該工作：

((window, document, requirements, callback) -> 
    getScript = (url, callback) -> 
     script = document.createElement('script') 
     script.src = url 
     head = document.documentElement.childNodes[0] 
     done = false 
     script.onload = script.onreadystatechange = -> 
      if not done and (not (readyState = @readyState) or readyState == 'loaded' or readyState == 'complete') 
      done = true 
      callback() 
      script.onload = script.onreadystatechange = null 
      head.removeChild script 

     head.appendChild script 

    if not ($ = window.jQuery) or requirements['jq'] > $.fn.jquery 
     getScript 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js', -> 
      getScript 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js', -> 
       callback window.jQuery.noConflict(1) 
    else 
     if not (jqui_version = window.jQuery.ui.version) or requirements['jqui'] > jqui_version 
      getScript 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js', -> 
       callback window.jQuery.noConflict(1) 
     else 
      callback window.jQuery.noConflict(1) 

) window, document, {jq: '1.6.1', jqui: '1.8.7'}, ($) -> 
    # Your code goes here: 
    alert "jq: #{$.fn.jquery}, jqui: #{$.ui.version}" 

你會希望取消選中CoffeeMarklet頁面上的 「添加jQuery的」 選項，如果使用上面的代碼

更新到： 增加了對jQuery和jQuery UI的存在性的檢查，因此不會不必要地加載它。

雖然可以通過檢查jQuery的正確版本是否已經存在，如Ben Almans代碼那樣改進。

署名：

Beygi給a lovely snippet加載JavaScript資源此起彼伏。