在书签中使用 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

Edit:就此而言，您确实应该对 s1 做同样的事情，否则 $ -> 调用可以失败.它成功的事实表明您的浏览器中缓存了 jQuery，或者页面上已经有 jQuery.您还应该使用 noConflict 来避免覆盖页面的现有 jQuery 版本.Acorn 链接到的 Run jQuery Code Bookmarklet完成所有这些事情(并且以比此答案中的代码更跨浏览器的方式).

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).

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