Question

我正在尝试建立一个书签。我想最小化bookmarklette中的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
});

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

2 个答案: