Ajax也可以本地取模板 ，示例--完善窗口隐藏与共用,简单示例模板代码放在templet文件夹中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>本地取模板--完善窗口隐藏与共用</title> <style> .add{ width: 300px; background-color: gray; } ul { list-style: none; } </style> </head> <body> <ul> <li>打开<input type="button"id="open"></li> <li>浏览<input type="button" id="look"></li> </ul> </body> <script> var getHTML=function(url,fn){ var xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.setRequestHeader("content-type", "text/plain"); xhr.onreadystatechange = function() { if(xhr.readyState == 4) { fn(xhr.responseText); } } xhr.send(null); } //打开窗口一 var open = document.getElementById("open"); open.onclick=function(){ getHTML("templet/add.html",function(html){ var dialog=document.createElement("div"); dialog.innerHTML=html; document.body.appendChild(dialog); var words=document.getElementById("words"); words.setAttribute("status","open"); //设置属性 words.innerText="haaaaaaaa"; Bind_Event(); //打开窗口里各种操作函数的执行 }); } //打开窗口二 var look=document.getElementById("look"); look.onclick=function() { getHTML("templet/add.html",function(html){ var dialog=document.createElement("div"); dialog.innerHTML=html; document.body.appendChild(dialog); var words=document.getElementById("words"); words.setAttribute("status","look"); words.innerText="xiiiiiiii"; Bind_Event(); }); } //退出 var Bind_Event=function(){ var exit=document.getElementById("exit"); exit.addEventListener("click",function() { document.getElementById("add").remove(); } ) } </script> </html>
templet文件夹
<div class="add" id="add"> <p class="words" id="words"></p> <input type="button" value="退出" id="exit"> </div>