调试的新花招,利用firebug动态加载js库文件
2012-09-21 11:26
134 查看
我们在对网页进行调试时,可以利用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库文件,进行在线调试,快来试试吧。
写了个小程序,可以动态加载库文件,然
后使用它,这个对调试在线网页实在太有用了,哈哈。思路很简单,动态创建一个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库文件,进行在线调试,快来试试吧。
相关文章推荐
- [原创 js]调试的新花招,利用firebug动态加载js库文件
- 动态加载JS文件提升访问网站速度
- 补充《动态加载外部.js文件时候,javascript的执行顺序问题》
- 动态加载及判断js文件
- 解决_动态加载JS文件_调用时出错
- 使用jQuery动态加载js脚本文件的方法
- JS动态加载JS与CSS文件
- 如何用Ext中的panel动态的加载js文件,我用的了autoLoad,并将其属性scripts设成了true,但还是不行
- 动态按需异步加载js文件
- js 如何通过js脚本动态加载js文件及读写cookie
- 如何调试异步加载的js文件
- 如何调试异步加载页面里包含的js文件
- 动态导入JS文件节省加载时间
- 详谈LABJS按需动态加载js文件
- javascript中采用jQuery ajax动态加载js文件的解决方法
- 利用JS弹出层实现简单的动态提示“正在加载中,请稍等...”
- 动态加载js 文件
- 动态加载js文件简单示例
- 动态加载JS文件的三种方法
- 使用js动态加载上传文件