使用 DOM 添加外部 .js，然后从 .js 调用函数

Question

我正在尝试建立一个书签。我想最小化书签中 JavaScript 的大小，以便我可以在外部文件中维护大部分代码。我的目标是...
1) 将外部 .js 文件添加到页面。
2) 从外部 .js 文件调用函数。
3) 让该函数向页面添加其他 .js 文件（例如 JQuery 源）。

这是我的 1 号代码。它有效。

javascript:function bmksMain(){var script=document.createElement('script');script.src='http://localhost/bmks/bmksBmkMain.js';scriptObj=document.body.appendChild(script);}bmksMain();

这是 .js 文件的内容。

function bmksBmkMaster(){
      alert('debug1');
    var script, object;
    script = document.createElement('script');
    script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js';
    object = document.body.appendChild(script);
      alert('debug2');
    $("body").hide();
      alert('debug3');
}
bmksBmkMaster();

当我将书签代码粘贴到地址栏中并执行时，调试 1 和 2 会触发，然后就死掉了。然后，如果我再次执行而不刷新页面，所有三个调试都会触发，并且一切正常。

我可以不包含 .js 并在同一函数/脚本中使用它吗？发生了一些奇怪的事情......

提前致谢！

（在 IE7 和最新的 Chrome 中测试）

Answer 1

查看 jQuerify Bookmarklet 文章及其后续文章，了解应该如何进行的示例完毕。 （例如，采用全局 $ 标识符是不明智的。）

Answer 2

这是一种跨浏览器加载脚本的方法：

function loadScript(scriptUrl, callback){
    var script = document.createElement('script');
    script.type='text/javascript';
    script.onload = function(){
        callback(); 
            callback = function(){};

    }
    script.onreadystatechange = function () {
        if(script.readyState === 'loaded' || script.readyState === 'complete'){
            callback();
                    callback = function(){};
        } 
    }
    script.src = scriptUrl;
    document.getElementsByTagName('head').item(0).appendChild(script);
}

您可以像这样使用它：

loadScript('http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', function(){
  //hide body
});