js實現靜態頁面的include功能
當前位置:點晴教程→知識管理交流
→『 技術文檔交流 』
姑且不說為什么會有這樣的需求,就談談怎么實現吧,當這個需求出來的時候我就想到的是js,一種方式就是fileStream的方式把文件內容讀出來在標簽里把內容顯示出來,再一種方式就是xmlHttpRequest創建對象對遠程文件讀取,這種更像web方式,前一種應該說是文件操作方式。在后一種方式的考慮閱覽器的兼容性,基于這個問題我故意裝了IE7.0和firefox,一直用的都是IE6.0。把這兩種方式實現的代碼貼下,希望能對你有說幫助,更多的是自己一個筆記。
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){ //傳入的參數是標簽id及文件所在路徑 8var forReading=1; 9var fso = new ActiveXObject("Scripting.FileSystemObject"); 10var file = fso.OpenTextFile(src,forReading); 11var text = file.ReadAll(); //ReadAll讀取的是所有內容,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,下面就要根據版本創建對象 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 ![]() 67 ![]() 68 ![]() 69 ![]() 70 ![]() 71 ![]() 72 ![]() 73 ![]() 74 ![]() 75 ![]() 76 ![]() 77//這種方式需要操作客戶端adodb.recordset對象,有可能客戶端會不支持 78<script language="VBScript"> 79 ![]() 80 ![]() 81 ![]() 82 ![]() 83 ![]() 84 ![]() 85 ![]() 86 ![]() 87 ![]() 88 ![]() 89 ![]() 90 ![]() 91 ![]() 92 ![]() 93 ![]() 94 ![]() 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 編輯過 |
關鍵字查詢
相關文章
正在查詢... |