这是上次面试的第二题,考察了动态加载外部JS的方法,当时完全不会,回来找了下资料,原来《高性能网站建设进阶指南》里面有说道的,主要是利用script onload方法。
另外,题目里给的checkbox和submit都是没有ID的,还需要遍历。本来有个lastElementChild可以用的,不过好像IE不支持。
复制代码
题目:
1.提交表单时按勾选的复选框加载外部JS
2.当所有代码加载完成后alert("Done")
我的解决方案:
外部的JS文件内容分别是:
a.js:
复制代码
b.js:
复制代码
c.js:
复制代码
d.js:
复制代码
另外,题目里给的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>
<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>
外部的JS文件内容分别是:
a.js:
- alert("a");
b.js:
- alert("b");
c.js:
- alert("c");
d.js:
- alert("d");