JS动态加载脚本及对动态脚本内方法的调用
首先咱们须要一个被加载的js文件，我在一个固定文件夹下建立了一个package.js，打开后在里面写一个方法functionOne，很简单，代码以下：javascript
function functionOne(){
alert("成功加载");
}
后面的html文件都建立在同一个目录下。html
方法一：直接document.writejava
在同一个文件夹下面建立一个function1.html，代码以下：node
<html>
<head>
<title>动态加载js</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript">
function init()
{
//加载js脚本
document.write("<script src='package.js'><\/script>");
//加载一个按钮
document.write("<input type=\"button\" value=\"测试运行效果\" onclick=\"operation()\"\/>");
//若是立刻使用会找不到，由于尚未加载进来，此处会报错
functionOne();
}
function operation()
{
//能够运行，显示“成功加载”
functionOne();
}
</script>
</head>
<body>
<input type="button" value="初始化加载" onclick="init()"/>
</body>
</html>
经过document.write的方式能够往页面写入脚本，如代码所示，点击按钮“初始化加载”后能够加载package.js文件，可是当即运行里面的方法functionOne会找不到此方法，报告错误，而点击第二个按钮（经过document.write动态建立的“测试运行效果”）发现能够执行，此时脚本已经加载完毕了。因为这种方式是异步加载（一边继续执行后面的代码，一边额外开一个线程执行须要加载的脚本），而且document.write会重写界面，明显不实用。ajax
方法二：动态改变已有script的src属性浏览器
在同一个文件夹下面建立一个function2.html，代码以下：缓存
<html>
<head>
<title>动态加载js</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript" id="yy" src=""></script>
<script type="text/javascript">
function init()
{
yy.src = "package.js";
//若是立刻使用会找不到，由于尚未加载进来，此处会报错
functionOne();
}
function operation()
{
//能够运行，显示“成功加载”
functionOne();
}
</script>
</head>
<body>
<input type="button" value="测试按钮" onclick="init()"/>
<input type="button" value="测试运行效果" onclick="operation()"/>
</body>
</html>
此种方法的好处在于不会改变界面元素，不至于重写界面元素，可是一样是异步加载，会有一样的问题。服务器
方法三：动态建立script元素（异步）app
在同一个文件夹下面建立一个function3.html，代码以下：异步
<html>
<head>
<title>动态加载js</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript">
function init()
{
var myScript= document.createElement("script");
myScript.type = "text/javascript";
myScript.src="package.js";
document.body.appendChild(myScript);
//若是立刻使用会找不到，由于尚未加载进来
functionOne();
}
function operation()
{
//能够运行，显示“成功加载”
functionOne();
}
</script>
</head>
<body>
<input type="button" value="测试按钮" onclick="init()"/>
<input type="button" value="测试运行效果" onclick="operation()"/>
</body>
</html>
此办法的优点相对于第二种而言就是不须要最开始就在界面写一个script标签，缺点仍是异步加载，存在一样的问题。
这三种方法都是异步执行的，因此在加载这些脚本的同时，主页面的脚本继续运行，若是用以上的方法，那下面的代码将得不到预期的效果。
不过能够在functionOne前面加一个alert就能够堵塞一下主页面脚本的运行，而后你发现functionOne就能够运行了，或者你的后期代码须要在另外一个按钮下执行，一步一步的来，要不就定义一个计时器，在固定时间后再执行后面的代码，不过在项目里面确定不可能使用这些方法。
其实第三种方法改一点就变成同步加载了。
方法四：动态建立script元素（同步）
在同一个文件夹下面建立一个function4.html，代码以下：
<html>
<head>
<title>动态加载js</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript">
function init()
{
var myScript= document.createElement("script");
myScript.type = "text/javascript";
myScript.appendChild(document.createTextNode("function functionOne(){alert(\"成功运行\"); }"));
document.body.appendChild(myScript);
//此处发现能够运行
functionOne();
}
</script>
</head>
<body>
<input type="button" value="测试按钮" onclick="init()"/>
</body>
</html>
此方法并无加载外部的js文件，而是给myScript添加了子项。在Firefox、Safari、Chrome、Opera和IE9中，这些代码能够正常运行。可是在IE8以及如下的版本中会致使错误。IE将<script>视为一个特殊的元素，不容许DOM访问其子节点。不过能够用<script>元素的text属性来制定js代码，想下面的例子这样：
var myScript= document.createElement("script");
myScript.type = "text/javascript";
myScript.text = "function functionOne(){alert(\"成功运行\"); }";
document.body.appendChild(myScript);
//此处能够运行
functionOne();
通过这样修改以后的代码能够在IE、Firefox、Opera和Safari3及以后版本中运行。Safari3.0以前的版本虽然不能正确地支持text属性，但却容许使用文本节点技术来指定代码。若是须要兼容早期版本的Safari，可使用下面代码：
var myScript= document.createElement("script");
myScript.type = "text/javascript";
var code = "function functionOne(){alert(\"成功运行\"); }";
try{
myScript.appendChild(document.createTextNode(code));
}
catch (ex){
myScript.text = code;
}
document.body.appendChild(myScript);
//此处发现能够运行
functionOne();
这里，首先尝试标准的DOM文本节点方法，由于除了IE8以及如下，全部浏览器都支持这种方式。若是这行代码抛出了错误，那么说明是IE8以及如下，因而就必须使用text属性了。整个过程能够用如下函数来表示：
function loadScriptString(code)
{
var myScript= document.createElement("script");
myScript.type = "text/javascript";
try{
myScript.appendChild(document.createTextNode(code));
}
catch (ex){
myScript.text = code;
}
document.body.appendChild(myScript);
}
而后你能够在其余地方使用此方法来加载须要使用的代码。实际上，这样执行代码与在全局做用于中把相同字符串传递给eval()是同样的。可是咱们这里只能使用字符串形式的代码，也有局限性，用户通常但愿提供的方法形如loadScriptAddress("package.js")的方式，因此咱们还须要继续讨论。
方法五：XMLHttpRequest/ActiveXObject异步加载
在同一个文件夹下面建立一个function5.html，代码以下：
<html>
<head>
<title>动态加载js</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript">
function init()
{
//加载package.js文件，设置script的id为yy
ajaxPage("yy","package.js");
//此方法为package.js里面的方法，此处执行方法成功
functionOne();
}
function ajaxPage(sId,url)
{
var oXmlHttp = getHttpRequest();
oXmlHttp.onreadystatechange = function()
{
//4表明数据发送完毕
if ( oXmlHttp.readyState == 4 )
{
//0为访问的本地，200表明访问服务器成功，304表明没作修改访问的是缓存
if(oXmlHttp.status == 200 || oXmlHttp.status == 0 || oXmlHttp.status == 304)
{
includeJS(sId,oXmlHttp.responseText);
}
else
{
}
}
}
oXmlHttp.open("GET",url,true);//true为异步加载（即在发送ajax的同时可运行其余代码）false为//同步加载(加载的同时不能执行其余代码)；
oXmlHttp.send(null);
}
function getHttpRequest()
{
if(window.ActiveXObject)//IE
{
return new ActiveXObject("MsXml2.XmlHttp");
}
else if(window.XMLHttpRequest)//其余
{
return new XMLHttpRequest();
}
}
function includeJS(sId,source)
{
if((source != null)&&(!document.getElementById(sId)))
{
var myHead = document.getElementsByTagName("HEAD").item(0);
var myScript = document.createElement( "script" );
myScript.language = "javascript";
myScript.type = "text/javascript";
myScript.id = sId;
try{
myScript.appendChild(document.createTextNode(source));
}
catch (ex){
myScript.text = source;
}
myHead.appendChild( myScript );
}
}
</script>
</head>
<body>
<input type="button" value="测试按钮" onclick="init()"/>
</body>
</html>
ActiveXObject只有IE里面才有，其余浏览器大部分支持XMLHttpRequest，经过此办法咱们能够实现动态加载脚本了，不过是异步加载，也无法运行functionOne，第二次就能够运行了，可是惋惜的是在IE、Firefox、Safari下能够运行，在Opera、Chrome下会出错，Chrome下的错误以下：
不过只要发布以后在Chrome和Opera下就不会出现错误了。
其实这里把open里面设置为false就是同步加载了，同步加载不须要设置onreadystatechange事件。
方法六：XMLHttpRequest/ActiveXObject同步加载
在这里我把一些状况考虑在内，写成了一个方法，封装为loadJS.js，方便之后直接调用，代码以下：
/**
* 同步加载js脚本
* @param id 须要设置的<script>标签的id
* @param url js文件的相对路径或绝对路径
* @return {Boolean} 返回是否加载成功，true表明成功，false表明失败
*/
function loadJS(id,url){
var xmlHttp = null;
if(window.ActiveXObject)//IE
{
try {
//IE6以及之后版本中可使用
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
//IE5.5以及之后版本可使用
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else if(window.XMLHttpRequest)//Firefox，Opera 8.0+，Safari，Chrome
{
xmlHttp = new XMLHttpRequest();
}
//采用同步加载
xmlHttp.open("GET",url,false);
//发送同步请求，若是浏览器为Chrome或Opera，必须发布后才能运行，否则会报错
xmlHttp.send(null);
//4表明数据发送完毕
if ( xmlHttp.readyState == 4 )
{
//0为访问的本地，200到300表明访问服务器成功，304表明没作修改访问的是缓存
if((xmlHttp.status >= 200 && xmlHttp.status <300) || xmlHttp.status == 0 || xmlHttp.status == 304)
{
var myHead = document.getElementsByTagName("HEAD").item(0);
var myScript = document.createElement( "script" );
myScript.language = "javascript";
myScript.type = "text/javascript";
myScript.id = id;
try{
//IE8以及如下不支持这种方式，须要经过text属性来设置
myScript.appendChild(document.createTextNode(xmlHttp.responseText));
}
catch (ex){
myScript.text = xmlHttp.responseText;
}
myHead.appendChild( myScript );
return true;
}
else
{
return false;
}
}
else
{
return false;
}
}
此处考虑到了浏览器的兼容性以及当为Chrome、Opera时必须是发布，注释仍是写的比较清楚的，之后须要加载某个js文件时，只须要一句话就好了，如loadJS("myJS","package.js")。方便实用。
若是想要实现不发布还非要兼容全部浏览器，至少我还没找出这样的同步加载的办法，咱们只能经过异步加载开出回调函数来实现。
方法七：回调函数方式
在同一个文件夹下面建立一个function7.html，代码以下：
<html>
<head>
<title>动态加载js</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript">
function init()
{
//加载package.js文件，设置script的id为yy
loadJs("yy","package.js",callbackFunction);
}
function callbackFunction()
{
functionOne();
}
function loadJs(sid,jsurl,callback){
var nodeHead = document.getElementsByTagName('head')[0];
var nodeScript = null;
if(document.getElementById(sid) == null){
nodeScript = document.createElement('script');
nodeScript.setAttribute('type', 'text/javascript');
nodeScript.setAttribute('src', jsurl);
nodeScript.setAttribute('id',sid);
if (callback != null) {
nodeScript.onload = nodeScript.onreadystatechange = function(){
if (nodeScript.ready) {
return false;
}
if (!nodeScript.readyState || nodeScript.readyState == "loaded" || nodeScript.readyState == 'complete') {
nodeScript.ready = true;
callback();
}
};
}
nodeHead.appendChild(nodeScript);
} else {
if(callback != null){
callback();
}
}
}
</script>
</head>
<body>
<input type="button" value="测试按钮" onclick="init()"/>
</body>
</html>
这种方式全部浏览器都支持，可是后面的代码必须放在回调函数里面，也就是异步加载了。看需求使用吧。
- 1. 动态加载JS脚本
- 2. js动态加载脚本
- 3. JavaScript动态加载脚本
- 4. js实现动态加载脚本的方法实例汇总
- 5. 要实现动态加载JS脚本有4种方法：
- 6. 动态脚本
- 7. 原生JS动态加载JS、CSS文件及代码脚本
- 8. 浏览器调试动态js脚本
- 9. ASP.NET页面动态添加js脚本
- 10. 动态添加jquery脚本
- 更多相关文章...
- • Swift 下标脚本 - Swift 教程
- • ionic 加载动作 - ionic 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • SpringBoot中properties文件不能自动提示解决方法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 动态加载JS脚本
- 2. js动态加载脚本
- 3. JavaScript动态加载脚本
- 4. js实现动态加载脚本的方法实例汇总
- 5. 要实现动态加载JS脚本有4种方法：
- 6. 动态脚本
- 7. 原生JS动态加载JS、CSS文件及代码脚本
- 8. 浏览器调试动态js脚本
- 9. ASP.NET页面动态添加js脚本
- 10. 动态添加jquery脚本