動(dòng)態(tài)加載JS文件的三種方法
更新時(shí)間:2013年11月08日 10:07:58 作者:
動(dòng)態(tài)加載JS文件的三種方法
直接看實(shí)例。
例1 重新加載js文件
function loadJs(file) {
var head = $("head").remove("script[role='reload']");
$("<scri" + "pt>" + "</scr" + "ipt>").attr({ role: 'reload', src: file, type: 'text/javascript' }).appendTo(head);
}
例2 重新載入javascript文件的方法(給js定個(gè)id),自己封裝成一個(gè)方法方便大家使用:
function reloadAbleJSFn(id,newJS)
{
var oldjs = null;
var t = null;
var oldjs = document.getElementById(id);
if(oldjs) oldjs.parentNode.removeChild(oldjs);
var scriptObj = document.createElement("script");
scriptObj.src = newJS;
scriptObj.type = "text/javascript";
scriptObj.id = id;
document.getElementsByTagName("head")[0].appendChild(scriptObj);
}
例3 jquery的就直接使用getScript就可以了。
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(function()
{
$('#loadButton').click(function(){
$.getScript('new.js',function(){
newFun('"Checking new script"');//這個(gè)函數(shù)是在new.js里面的,當(dāng)點(diǎn)擊click后運(yùn)行這個(gè)函數(shù)
});
});
});
</script>
</head>
<body>
<button type="button" id="loadButton">Load</button>
例1 重新加載js文件
復(fù)制代碼 代碼如下:
function loadJs(file) {
var head = $("head").remove("script[role='reload']");
$("<scri" + "pt>" + "</scr" + "ipt>").attr({ role: 'reload', src: file, type: 'text/javascript' }).appendTo(head);
}
例2 重新載入javascript文件的方法(給js定個(gè)id),自己封裝成一個(gè)方法方便大家使用:
復(fù)制代碼 代碼如下:
function reloadAbleJSFn(id,newJS)
{
var oldjs = null;
var t = null;
var oldjs = document.getElementById(id);
if(oldjs) oldjs.parentNode.removeChild(oldjs);
var scriptObj = document.createElement("script");
scriptObj.src = newJS;
scriptObj.type = "text/javascript";
scriptObj.id = id;
document.getElementsByTagName("head")[0].appendChild(scriptObj);
}
例3 jquery的就直接使用getScript就可以了。
復(fù)制代碼 代碼如下:
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(function()
{
$('#loadButton').click(function(){
$.getScript('new.js',function(){
newFun('"Checking new script"');//這個(gè)函數(shù)是在new.js里面的,當(dāng)點(diǎn)擊click后運(yùn)行這個(gè)函數(shù)
});
});
});
</script>
</head>
<body>
<button type="button" id="loadButton">Load</button>
您可能感興趣的文章:
- jquery及js實(shí)現(xiàn)動(dòng)態(tài)加載js文件的方法
- 用ajax動(dòng)態(tài)加載需要的js文件
- 如何實(shí)現(xiàn)JavaScript動(dòng)態(tài)加載CSS和JS文件
- JS 動(dòng)態(tài)加載js文件和css文件 同步/異步的兩種簡(jiǎn)單方式
- JS加載器如何動(dòng)態(tài)加載外部js文件
- javascript中動(dòng)態(tài)加載js文件多種解決辦法總結(jié)
- 使用javaScript動(dòng)態(tài)加載Js文件和Css文件
- 理解javascript中的回調(diào)函數(shù)(callback)
- js 異步操作回調(diào)函數(shù)如何控制執(zhí)行順序
- javascript 自定義回調(diào)函數(shù)示例代碼
- 原生JS實(shí)現(xiàn)動(dòng)態(tài)加載js文件并在加載成功后執(zhí)行回調(diào)函數(shù)的方法
相關(guān)文章
JavaScript中檢測(cè)數(shù)據(jù)類(lèi)型的四種方法
這篇文章主要給大家分享的是JavaScript中檢測(cè)數(shù)據(jù)類(lèi)型的四種方法,有 typeof、instanceof、constructor、Object.prototype.toString.call(),下面文章詳細(xì)介紹內(nèi)容,需要的小伙伴可以參考一下2022-01-01通過(guò)action傳過(guò)來(lái)的值在option獲取進(jìn)行驗(yàn)證的方法
通過(guò)action傳過(guò)來(lái)的值在option獲取進(jìn)行驗(yàn)證,下面有個(gè)不錯(cuò)的示例,需要的朋友不要錯(cuò)過(guò)2013-11-11JavaScript封閉函數(shù)及常用內(nèi)置對(duì)象示例
這篇文章主要介紹了JavaScript封閉函數(shù)及常用內(nèi)置對(duì)象,結(jié)合實(shí)例形式分析了JavaScript封閉函數(shù)及常用內(nèi)置對(duì)象的定義與簡(jiǎn)單使用相關(guān)操作技巧,需要的朋友可以參考下2019-05-05使用JS location實(shí)現(xiàn)搜索框歷史記錄功能
這篇文章主要介紹了使用JS location實(shí)現(xiàn)搜索框歷史記錄功能,本文通過(guò)實(shí)例 代碼講解的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12使用JS實(shí)現(xiàn)圖片展示瀑布流效果的實(shí)例代碼
下面小編就為大家?guī)?lái)一篇使用JS實(shí)現(xiàn)圖片展示瀑布流效果的實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09js自執(zhí)行函數(shù)的幾種不同寫(xiě)法的比較
js自執(zhí)行函數(shù)的幾種不同寫(xiě)法的比較,需要的朋友可以參考下2012-08-08