js實現(xiàn)靜態(tài)頁面的include功能
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
姑且不說為什么會有這樣的需求，就談談怎么實現(xiàn)吧，當這個需求出來的時候我就想到的是js,一種方式就是fileStream的方式把文件內(nèi)容讀出來在標簽里把內(nèi)容顯示出來，再一種方式就是xmlHttpRequest創(chuàng)建對象對遠程文件讀取，這種更像web方式，前一種應該說是文件操作方式。在后一種方式的考慮閱覽器的兼容性，基于這個問題我故意裝了IE7.0和firefox，一直用的都是IE6.0。把這兩種方式實現(xiàn)的代碼貼下，希望能對你有說幫助，更多的是自己一個筆記。
FileStream方式： 1<html xmlns="http://www.w3.org/1999/xhtml"> 2<head> 3<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 4<title>html include實例</title> 5<SCRIPT language=JavaScript> 6<!-- 7function ReadFile(id,src){ //傳入的參數(shù)是標簽id及文件所在路徑 8var forReading=1; 9var fso = new ActiveXObject("Scripting.FileSystemObject"); 10var file = fso.OpenTextFile(src,forReading); 11var text = file.ReadAll(); //ReadAll讀取的是所有內(nèi)容，ReadLine()則讀一行 12file.Close(); 13id.innerHTML=text; 14} 15//--> 16</SCRIPT> 17</head> 18 19<body onload=ReadFile(xxx,"E:\\htmltest\\top.htm");ReadFile(yy,"E:\\htmltest\\foot.htm");> 20<span id="top"></span> 21<span id="foot"></span> 22</body> 23</html> 1<html xmlns="http://www.w3.org/1999/xhtml"> 2<head> 3<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 4<title>讀取html實例</title> 5 6<script> 7 var xmlHttp; 8 var rs; 9 var isie = false; 10 function startRequest(url,divs) 11 { 12 if(window.ActiveXObject) //是IE，下面就要根據(jù)版本創(chuàng)建對象 13 { 14 try 15 { 16 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 17 } 18 catch(e) 19 { 20 try 21 { 22 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 23 } 24 catch(e) 25 { 26 try 27 { 28 xmlHttp=new ActiveXObject("MSXML2.ServerXMLHTTP"); 29 30 } 31 catch (e) 32 { 33 34 } 35 } 36 } 37 38 isie = true; 39 } 40 else //不是IE,可能是firefox或者其他閱覽器 41 { 42 xmlHttp= new XMLHttpRequest(); 43 } 44 try{ 45 if(isie == false ){ 46 xmlHttp.open("GET", url, false); 47 xmlHttp.overrideMimeType("text/html;charset=gb2312"); 48 xmlHttp.send(null); 49 document.getElementById(divs).innerHTML=xmlHttp.responseText; 50 }else{ 51 xmlHttp.open("GET", url, false); 52 xmlHttp.send(null); 53 if(xmlHttp.readyState == 4){ 54 if (xmlHttp.status == 200 || xmlHttp.status == 0){ 55 document.getElementById(divs).innerHTML=bytes2BSTR(xmlHttp.responseBody); 56 } 57 } 58 } 59 }catch(exception){ 60 document.write('exception:'+exception.message); 61 } 62 } 63 </script> 64//處理亂碼問題，還有一種方式是這樣的： 65//<script language=javascript> 66  //function Recenspace(Html){ 67 // rs=new ActiveXObject("ADODB.RecordSet"); 68 // rs.fields.append("a",201,1); 69 // rs.open(); 70 // rs.addNew(); 71 // rs(0).appendChunk(Html); 72 // rs.update(); 73 // return rs(0).value; 74 // rs.close(); 75 // } 76  //</script>77//這種方式需要操作客戶端adodb.recordset對象，有可能客戶端會不支持 78<script language="VBScript"> 79 function bytes2BSTR(vIn) 80 dim strReturn,i,ThisCharCode,innerCode,Hight8,Low8,NextCharCode 81 strReturn="" 82 for i=1 to LenB(vIn) 83 ThisCharCode=AscB(MidB(vIn,i,1)) 84 if ThisCharCode<&H80 Then 85 strReturn=strReturn & Chr(ThisCharCode) 86 else 87 NextCharCode=AscB(MidB(vIn,i+1,1)) 88 strReturn=strReturn&Chr(CLng(ThisCharCode)*&H100+CInt(NextCharCode)) 89 i=i+1 90 end if 91 next 92 bytes2BSTR=strReturn 93 end function 94 </script> 95</head> 96 97<body onload=startRequest('cp.htm','top');startRequest('contact.htm','foot');> 98<span id="top"></span> 99<span id="foot"></span> 100</body> 101</html> 該文章在 2012/8/4 2:31:21 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
