在书签中使用 jQuery UI

Question

在 CoffeeScript 中，尽管此代码几乎与 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 UI 必须加载之前继续。这可以解释为什么代码中的 tabs() 调用失败，但是当您在脚本有时间加载后从控制台执行此操作时，它会成功。

您应该能够通过使其余代码从回调

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

Edit 运行来解决此问题：就此而言，您确实应该对 s1 执行相同的操作，或者否则 $ -> 调用可能会失败。它成功的事实表明您的浏览器中已经缓存了 jQuery，或者页面上已经有 jQuery。您还应该使用 noConflict 来避免覆盖页面的现有 jQuery 版本。 Acorn 链接到的 运行 jQuery 代码书签执行所有这些操作（并且以比此答案中的代码更跨浏览器的方式）。

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 给出了 一个用于加载 javascript 的可爱片段资源纷纷涌现。