如何在书签中包含外部javascript文件？

Question

我正在为一堆为工作编写的脚本制作CDN。 我曾经不得不分发它们，每个人都获取文件并将其安装在他们的计算机上，但是我正在将它们移动到Amazon cloudfront / s3实例中。

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

但是，我执行此操作的旧方法是使用jquery小书签生成器。 与此不同，我不知道我是否要使用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。 那么，最好的方法是什么？

Answer 1

我想，您面临的问题是jQuery小书签生成器无法使$在页面内可用。 它将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和$变量。 如果需要在已经使用这些变量的页面上运行小书签，请使用jQuery.noConflict(1) 。 例如， _jq = e.jQuery.noConflict(1)将使您使用_jq而不是$ ，并将原始的$和jQuery返回其原始值。 例：

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

如果要在.js代码中使用noConflict，但也要使用$，则将代码包装在一个函数中，然后创建一个本地范围的$ 。 例：

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