面试题目：动态加载外部JS

最新推荐文章于 2022-07-08 14:33:54 发布

大胖梦妮

最新推荐文章于 2022-07-08 14:33:54 发布

阅读量486

点赞数

这是上次面试的第二题，考察了动态加载外部JS的方法，当时完全不会，回来找了下资料，原来《高性能网站建设进阶指南》里面有说道的，主要是利用script onload方法。

另外，题目里给的checkbox和submit都是没有ID的，还需要遍历。本来有个lastElementChild可以用的，不过好像IE不支持。

<!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")
*/
</script>
</body>
</html>

复制代码

题目：
1.提交表单时按勾选的复选框加载外部JS
2.当所有代码加载完成后alert("Done")

我的解决方案：

<!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>

运行代码复制代码保存代码提示：您可以先修改部分代码再运行! power by W3Cfuns.com

外部的JS文件内容分别是：
a.js：

alert("a");

复制代码

b.js：

alert("b");

复制代码

c.js：

alert("c");

复制代码

d.js：

alert("d");

复制代码

大胖梦妮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面试题目：动态加载外部JS

这是上次面试的第二题，考察了动态加载外部JS的方法，当时完全不会，回来找了下资料，原来《高性能网站建设进阶指南》里面有说道的，主要是利用script onload方法。另外，题目里给的checkbox和submit都是没有ID的，还需要遍历。本来有个lastElementChild可以用的，不过好像IE不支持。面试题
复制链接

扫一扫