利用firebug动态加载online js文件

咱们在对网页进行调试时，能够利用firebug的命令行，对网页进行脚本的调试。对于原生js固然没有问题，但是，有时候咱们想要使用js类库来帮助调 试。js类库是须要先在网页上加载进相关的<script>标签才能使用的，若是在本地调试，咱们能够手动加上<script> 标签，但是，若是是线上的网页，咱们就没办法去手动添加了。好比说，如今叫你去调试www.sina.com.cn，你有办法使用YUI或者jquery 去调试他吗？由于新浪的页面上没有加载相关的类库文件，因此正常状况下，咱们是使用不了库文件的。

写了个小程序，能够动态加载库文件，然 后使用它，这个对调试在线网页实在太有用了，哈哈。思路很简单，动态建立一个script节点，指定script节点的src为类库文件的url地址（完 整路径），监听script节点的onload事件，调用回调事件，回调事件就能够使用咱们的类库文件了！代码以下：

=============================================

function addJs(jsUrl,fn){
var jsEl = document.createElement("script");
jsEl.src = jsUrl;
document.body.appendChild(jsEl);
jsEl.onload = fn;
}

=============================================

函数很简单，接收两个参数，第一个是动态加载的js文件的url路径，第二个是js文件加载完成后的回调函数。

我用这段代码，在www.sina.com.cn和www.163.com作了下实验，效果以下：

===============================================
首先是新浪的。将firebug切换到控制台tab，切换命令行到多行模式，输入js代码。

我动态加载了YUI3的种子文件，而且调用了YUI3的console组件，代码以下：

function loadHandler(){
YUI().use("node","console","dd",function(Y){
Y.get("body").addClass("yui-skin-sam");
var mycon = new Y.Console().render();
mycon.get("contentBox").plug(Y.Plugin.Drag);
mycon.log("hello world");
});
}

function addJs(jsUrl,fn){
var jsEl = document.createElement("script");
jsEl.src = jsUrl;
document.body.appendChild(jsEl);
jsEl.onload = fn;
}

addJs("http://yui.yahooapis.com/3.0.0b1/build/yui/yui-min.js",loadHandler);

效果截图以下：


=========================================================

接下来，我在网易，加载了jquery，代码以下：

function loadHandler2(){
$("a").css("background","#000");
}

function addJs(jsUrl,fn){
var jsEl = document.createElement("script");
jsEl.src = jsUrl;
document.body.appendChild(jsEl);
jsEl.onload = fn;
}

addJs("http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js",loadHandler2);

效果截图以下：
====================================== 动态加载本身喜欢的js库文件，进行在线调试，快来试试吧。