js实现静态页面的include功能
姑且不说为什么会有这样的需求,就谈谈怎么实现吧,当这个需求出来的时候我就想到的是js,一种方式就是fileStream的方式把文件内容读出来在标签里把内容显示出来,再一种方式就是xmlHttpRequest创建对象对远程文件读取,这种更像web方式,前一种应该说是文件操作方式。在后一种方式的考虑阅览器的兼容性,基于这个问题我故意装了IE7.0和firefox,一直用的都是IE6.0。把这两种方式实现的代码贴下,希望能对你有说帮助,更多的是自己一个笔记。
FileStream方式:
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
<!--
7
function ReadFile(id,src){ //传入的参数是标签id及文件所在路径
8
var forReading=1;
9
var fso = new ActiveXObject("Scripting.FileSystemObject");
10
var file = fso.OpenTextFile(src,forReading);
11
var text = file.ReadAll(); //ReadAll读取的是所有内容,ReadLine()则读一行
12
file.Close();
13
id.innerHTML=text;
14
}
15
//-->
16
</SCRIPT>
17
</head>
18![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
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方式![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
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>
代码就这样了,进公司快两个星期了,工作跟想象中的不一样。生活就工作吧!有句话叫:坏事它未必就是坏事!生活会让每个人越来越丰富的!![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
24
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
25
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
26
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
27
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
28
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
29
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
30
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
31
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
32
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
33
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
34
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
35
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
36
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
37
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
38
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
39
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
40
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
41
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
42
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
43
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
44
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
45
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
46
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
47
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
48
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
49
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
50
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
51
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
52
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
53
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
54
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
55
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
56
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
57
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
58
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
59
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
60
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
61
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
62
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
63
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
64
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
65
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
66
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
67
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
68
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
69
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
70
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
71
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
72
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
73
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
74
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
75
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
76
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
77
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
78
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
79
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
80
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
81
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
82
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
83
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
84
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
85
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
86
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
87
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
88
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
89
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
90
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
91
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
92
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
93
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
94
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
95
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
96
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
97
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
98
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
99
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
100
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
101
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)