本文介绍如何使用 JavaScript 动态获取远程 HTML 文件内容，并将其插入到当前页面的指定 DIV 元素中。通过封装 clientSideInclude 函数，利用 XMLHttpRequest 或 ActiveXObject 发起异步请求，并将返回的 HTML 字符串写入目标容器的 innerHTML。该方法适用于简单的页面组件复用，但需注意浏览器的同源策略限制及旧版 IE 的兼容性问题。
HTML 容器准备
在 HTML 页面中，需要预先定义一个用于承载远程内容的容器，例如设置一个带有特定 ID 的 div 元素。
<div id="includeHtml"></div>
JavaScript 核心实现逻辑
核心 JavaScript 代码通过定义一个名为 clientSideInclude 的函数来实现功能。该函数接收两个参数：目标容器的 ID 和远程 HTML 文件的 URL。函数内部首先初始化请求对象 req 为 false，随后根据浏览器类型进行分支处理。对于支持 XMLHttpRequest 的非微软浏览器（如 Firefox、Safari 等），尝试实例化 XMLHttpRequest 对象；若失败则 req 保持为 false。对于 Windows 系统下的 Internet Explorer，尝试实例化 ActiveXObject("Msxml2.XMLHTTP")，若失败则尝试 "Microsoft.XMLHTTP"。若所有尝试均失败，则弹出警告提示用户升级浏览器至 Internet Explorer 5 以上版本或 Firefox、Safari 等兼容浏览器。
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);
if (req.status == 404) {
clientSideInclude(id, 'error.html')
} else {
element.innerHTML = req.responseText;
}
} else {
element.innerHTML =
"对不起，你的浏览器不支持" +
"XMLHTTPRequest 对象。这个网页的显示要求" +
"Internet Explorer 5 以上版本, " +
"或 Firefox 或 Safari 浏览器，也可能会有其他可兼容的浏览器存在。";
}
}
clientSideInclude(includeHtml, "http://XXXXX.html");//页面中的一个div的id为includeHtml
方法使用说明
该方法的调用方式非常直观，代码中已包含详细注释。此处对不使用注释的读者进行简要说明。
加载与渲染结果
将上述 JavaScript 代码嵌入当前页面直接执行，或将其封装为独立的 JS 文件并通过 script 标签引入。执行后，远程指定的 HTML 内容会自动加载并渲染到当前页面中 ID 为 includeHtml 的 div 容器内。