利用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庫文件，進行在線調試，快來試試吧。