js实现静态页面的include功能

admin

2012年8月4日 2:31 本文热度 3392

姑且不说为什么会有这样的需求，就谈谈怎么实现吧，当这个需求出来的时候我就想到的是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
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>

xmlHttpRequest方式

  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

//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 编辑过

关键字查询

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。