使用jquery load做html静态页面包含

内容纲要

使用JavaScript的客户端包含

这个方法主要适用于Firefox浏览器(任何操作系统)、IE5以上(Windows)、苹果的Safari浏览器(MacOS X),可以使用一项叫做XMLHTTP 的API技术来通过Javascript程序读取一个动态读取一个XML文件。这种方法也可以用来读取一个HTML文件,并放到当前网页文件的指定位置。

专业网站设计者:不要用这个! 也许在某些情况下你不得不用JavaScript来实现网页嵌套,但是这只是一种转弯抹角的替代方法。当你的服务器可以支持前面讲的服务器端嵌套方法时,
尤其是专业人士,应尽可能避免使用这种方法,因为你的客户可能会投诉你做的网页内容无法被Google搜索到,或不能在某些浏览器中正常显示。

记住这种方法做的网页只能在Firefox,Safari,和IE5以上版本的浏览器中正常显示。大部分人都是用这几种浏览器的,但是不是所有人,而且有些用户因为安全因素考虑会关闭Javascript功能。

重要提示:如果你是在本地电脑上调试网页而不是在服务器上浏览,最新版本的IE浏览器会自动屏蔽
Javascript动态生成的部分,并显示警告信息,你必须选择”允许显示动态内容”网页才能正常显示。当你把这些网页文件放到服务器上去的时候这个问
题就会自动消失的,因为IE会辨别出主页和被包含的网页内容都来自同一个服务器。

好了,说了够多了,下面是具体怎么做。把以下代码放在网页的<head>里面:

<script>
function clientSideInclude(id, url) {
var req = false;
// Safari, Firefox, 及其他非微软浏览器
if (window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
} catch (e) {
req = false;
}
} else if (window.ActiveXObject) {
// For Internet Explorer on Windows
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
req = false;
}
}
}
var element = document.getElementById(id);
if (!element) {
alert("函数clientSideInclude无法找到id " + id + "。" +
"你的网页中必须有一个含有这个id的div 或 span 标签。");
return;
}
if (req) {
// 同步请求,等待收到全部内容
req.open(’GET’, url, false);
req.send(null);
element.innerHTML = req.responseText;
} else {
element.innerHTML =
"对不起,你的浏览器不支持" +
"XMLHTTPRequest 对象。这个网页的显示要求" +
"Internet Explorer 5 以上版本, " +
"或 Firefox 或 Safari 浏览器,也可能会有其他可兼容的浏览器存在。";
}
}
</script>


了这段代码我们就可以在网页的任何位置插入另一个页面了。首先我们要生成一个作为”容器”的HTML控件,比如<span>,并给这个”容
器”控件一个ID,比如includefooter,然后把这个ID和要包含的页面的URL地址传递给前面写的这个js函数
clientSideInclude就可以了。

一个需要注意的地方是函数clientSideInclude只有在页面被完全加载后才能工作,所以我们需要在<body>标
签的onload事件上来调用这个函数,这是最保险的调用时机,因为这个事件触发的时候浏览器肯定已经完全解析了页面中所有HTML了。

所以,具体代码是:

在需要插入另一页面的地方写:
<span id="includefooter" > </span>

在页面开始处标签里写:
<body onLoad="clientSideInclude('includefooter', 'footer.html');>

当然,你也可以把函数clientSideInclude放在一个单独的文件里面,比如命名为clientSideInclude.js,然后在你的页面<head>标签中插入下面这<script>标签以便可以调用这个函数:
<script src="clientSideInclude.js" language="JavaScript"> </script>

发表回复