动态加载JS文件的三种方法


直接看实例。
例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定个id),自己封装成一个方法方便大家使用:

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"');//这个函数是在new.js里面的,当点击click后运行这个函数
});
});
});
</script>
</head>
<body>
<button type="button" id="loadButton">Load</button>

 

附加

const scriptEl = document.createElement('script');
scriptEl.onload = scriptEl.onreadystateschange = function () {
	if (!this.readyState // FF onload
        || this.readyState == 'loaded' || this.readyState == 'complete' // IE onreadystateschange
    ) {
	    // 脚本加载完成后执行某些逻辑
	    // IE支持onreadystateschange事件
	    // FF支持onload事件
    }
};
scriptEl.src = '/myscript.js';
document.body.appendChild(scriptEl);

 

上一篇 JavaScript脚本引用CDN失效时自动加载本地脚本
下一篇 彩虹外链网盘V5.3更新 新增用户系统与分块上传
文章列表
1 自用的图片转ICO工具
自用的图片转ICO工具
2
免费申请腾讯挪车码
免费申请腾讯挪车码
3
二维码在线解码html源码
二维码在线解码html源码
4
宝塔Linux企业版免费试用一周
宝塔Linux企业版免费试用一周
5
Sublime Text 中文版激活码
Sublime Text 中文版激活码
大米酱

大米酱管理员

三百六十行,行行出BUG。

本月创作热力图

最新评论
学习一下
学习一下
6月29日
学习一下
ziaowan
ziaowan
6月11日
OK
ziaowan
ziaowan
6月8日
阿洋
阿洋
6月2日
感谢作者分享
2067608730
2067608730
4月11日
加油大米!quantou
评论于APINEXT