您的位置：首页 > Web前端 > JavaScript

动态加载外部链接JS

2016-04-09 00:00 197 查看

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" content="text/html">
<title>面试题</title>
</head>
<body>
<form action="" id="aForm">
<input type="checkbox" value="a.js">
<input type="checkbox" value="b.js">
<input type="checkbox" value="c.js">
<input type="checkbox" value="d.js">
<input type="submit" value="提交">
</form>
<script type="text/javascript">
/*
// 1.提交表单时按勾选的复选框加载外部JS
// 2.当所有代码加载完成后alert("Done")
*/
var aForm = document.getElementById("aForm");
var theInputs = aForm.elements;
var checkedNum = 0;
var checkedJsSrc = new Array();

//禁止表单自动提交
aForm.onsubmit = function(){
return false;
}

//给提交按钮添加事件
for(i = 0; i < theInputs.length; i++){
if(theInputs[i].type == "submit"){
theInputs[i].onclick = function(){
for(j = 0; j < theInputs.length; j++){
if(theInputs[j].type == "checkbox" && theInputs[j].checked){
checkedNum++;
checkedJsSrc.unshift(theInputs[j].value);
}
}
loadJs(checkedNum);
}
}
}

//输出Done
function sayDone(){
alert("Done");
aForm.submit();
}

//加载外部JS
function loadJs(aNum){
var domScript = document.createElement("script");
var loadJsNum = aNum;
domScript.type = "text/javascript";

if(loadJsNum <= 1){
domScript.onloadDone = false;
domScript.src = checkedJsSrc[0];
domScript.onload = function (){
domScript.onloadDone = true;
sayDone();
}
domScript.onreadystatechange = function(){
if(("loaded" === domScript.readyState || "complete" === domScript.readyState) && !domScript.onloadDone){
domScript.onloadDone = true;
sayDone();
}
}
}
else
{
domScript.onloadDone = false;
domScript.src = checkedJsSrc[loadJsNum - 1];
domScript.onload = function (){
domScript.onloadDone = true;
loadJs(loadJsNum - 1);
}
domScript.onreadystatechange = function(){
if(("loaded" === domScript.readyState || "complete" === domScript.readyState) && !domScript.onloadDone){
domScript.onloadDone = true;
loadJs(loadJsNum - 1);
}
}
}
document.getElementsByTagName("head")[0].appendChild(domScript);
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航