如何在bookmarklets中包含外部JavaScript文件?

时间:2013-02-13 04:13:00

标签: javascript jquery cdn bookmarklet

我正在为我为工作编写的一堆脚本制作一个cdn。我以前必须分发它们并且每个人都获取文件并将其安装在他们的计算机上,但我将它们移动到亚马逊cloudfront / s3实例。

我将使用它来注入书签:http://allben.net/post/2010/01/30/CSS-JavaScript-Injection-Bookmarklets

然而,我使用jquery bookmarklet生成器的旧方法。这与此不同,如果我想使用它,我不知道如何包含jquery。

以下是一个示例脚本:

javascript:(function(){var%20s=document.createElement('script');s.setAttribute('src','cdn.domain.com/scripts/somescript.js');document.getElementsByTagName('body')[0].appendChild(s);})();

这就是书签。

剧本:

alert($(somecontainer).size());

显然这不起作用,因为bookmarklet不再注入jquery。那么,最好的方法是什么?

1 个答案:

答案 0 :(得分:1)

我想,您面临的问题是,jQuery bookmarklet生成器不会在页面中使$可用。它将jQuery变量保持在一个函数中,然后在运行后从页面中完全删除jQuery。

以下是此处代码的修改版本:http://benalman.com/projects/run-jquery-code-bookmarklet/应该可以使用。

function (e, a, g, h, f, c, b, d) {
  if (!(f = e.jQuery) || g > f.fn.jquery || h(f)) {
    c = a.createElement("script");
    c.type = "text/javascript";
    c.src = "http://ajax.googleapis.com/ajax/libs/jquery/" + g + "/jquery.min.js";
    c.onload = c.onreadystatechange = function () {
      if (!b && (!(d = this.readyState) || d == "loaded" || d == "complete")) {
        var s = document.createElement('script');
        s.setAttribute('src', 'cdn.domain.com/scripts/somescript.js');
        document.getElementsByTagName('body')[0].appendChild(s)
      }
    };
    a.documentElement.childNodes[0].appendChild(c)
  }
})(window, document, "1.3.2")

请注意,这将替换页面上的所有jQuery$变量。如果您需要在已使用这些变量的页面上运行bookmarklet,请使用jQuery.noConflict(1)。例如,_jq = e.jQuery.noConflict(1)将允许您使用_jq代替$,并将原始$jQuery返回到其原始值。例如:

alert(_jq(somecontainer).size());

如果你想使用noConflict但在你的.js代码中使用$,请将你的代码包装在一个函数中并创建一个本地范围的$。例如:

(function(){
  var $ = _jq;  // this $ will not affect any $ that exists outside this function.
  alert($(somecontainer).size());
})();