在Bookmarklet中使用jQuery UI [英] Using jQuery UI in a Bookmarklet

问题描述

在CoffeeScript中，虽然此代码与JavaScript几乎相同：

In CoffeeScript, though this code is almost identical to 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上工作的书签。

It doesn't work. Funny thing is it does work when trying the last line: $("#nm-container").tabs() from the console. I'm attaching the full code below. Note that I'm using CoffeeMarklet to generate the bookmarklet which seems to work only on 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()

推荐答案

我怀疑问题是你正在加载jQuery UI异步。

I suspect that the problem is that you're loading jQuery UI asynchronously. The line

window.document.body.appendChild(s2)

开始加载jQuery UI，但是您的代码在jQuery UI必须加载之前继续。这将解释为什么你的代码中的 tabs（）调用失败，但是在脚本加载后，从控制台执行它时会成功。

starts loading jQuery UI, but your code continues before jQuery UI has necessarily been loaded. That would explain why the tabs() call in your code fails, but it succeeds when you do it from the console, after the script has had time to load.

您应该能够通过回调运行剩余的代码来解决这个问题。

You should be able to fix this by making the rest of your code run from the callback

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

编辑：对于这个问题，你真的应该用 s1 做同样的事情，否则 $ - > 调用可能失败。事实上，它的成功建议，你有jQuery缓存在您的浏览器，或页面上已经有jQuery上。您还应该使用 noConflict 避免覆盖页面现有的jQuery版本。 Acorn链接到的运行jQuery代码书签做所有这些事情（并且在一个更加跨浏览器的方式比这个答案中的代码）。

Edit: And for that matter, you really should do the same thing with s1, or else the $ -> call could fail. The fact that it's succeeding suggests that either you have jQuery cached in your browser, or the page already has jQuery on it. You should also use noConflict to avoid overwriting the page's existing jQuery version. The Run jQuery Code Bookmarklet that Acorn linked to does all of these things (and in a more cross-browser manner than the code in this answer).

这篇关于在Bookmarklet中使用jQuery UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！