JavaScript 读取 XML 实现广告图片轮换（兼容 IE 与 Firefox）

结果与目标

最终效果是从指定的 XML 文件中读取广告配置，并根据预设逻辑（本例为秒数奇偶性）随机展示不同的图片源和跳转地址。系统需同时支持使用 ActiveXObject 的旧版 IE 浏览器和使用标准 DOM 接口的 Mozilla/Firefox 浏览器。

准备条件

要实现此功能，需要准备以下环境和素材：

• XML 数据文件：结构清晰定义广告的图片路径 (tupian) 和点击地址 (dizhi)。
• HTML 占位符页面中需预留用于显示图片的标签（通常使用 id 标识），以便 JS 动态替换属性。
• 浏览器环境：测试环境应包含 Internet Explorer (7.0及以下版本) 和较早期的 Firefox 版本，以验证兼容性逻辑。

第1步：构建 XML 数据结构

首先创建包含广告信息的 XML 文件，例如命名为 ads.xml。每个广告单元包含图片 URL 和链接 URL，索引位置将作为后续数组访问的依据。

注意：实际部署时请将上述示例路径替换为您的真实服务器地址。

第2步：初始化 HTML 容器

在网页正文中放置一个指向性的链接或图像容器，赋予唯一的 ID，如 tupian，用于承载动态加载的内容。

<a id="tupian" href="#" target="_blank">
    <img src="placeholder.gif" alt="Advertisement" />
</a>

第3步：编写核心 JavaScript 逻辑

以下是完整的客户端脚本实现。主要步骤包括：获取当前秒数确定轮换索引、检测浏览器类型、加载 XML 文档、提取节点值并执行格式清洗、最后赋值给 HTML 元素。

<script type="text/javascript">
// JScript 文件
var Now = new Date();
var Min = Now.getSeconds();
var i;

// 1. 确定轮换索引：根据秒数的奇偶性选择 0 或 1
if ((Min % 2) == 1)
    i = 1; // 奇数秒，选择第二个广告
else
    i = 0; // 偶数秒，选择第一个广告

var url = "xml/ads.xml";

// 定义 Trim 方法去除字符串首尾空白，防止 XML 解析时的换行干扰
String.prototype.Trim = function () {
    return this.replace(/(^\s*)|(\s*$)/g, "");
}

var xmlDoc;

// 2. 浏览器特性检测
// 检测是否支持标准的 DOM Level 2 Core (如 Firefox)
var moz = (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined');
// 检测是否支持 ActiveX (如 IE)
var ie = (typeof window.ActiveXObject != 'undefined');

// 3. 加载 XML 文件的函数
function importXML(file) {
    if (moz) {
        // Firefox/Mozilla: 使用标准 DOMParser
        xmlDoc = document.implementation.createDocument("", "doc", null);
    } else if (ie) {
        // Internet Explorer: 使用 MSXML 组件
        xmlDoc = new ActiveXObject("MSXML2.DOMDocument.3.0");
        xmlDoc.async = false;
        // 等待加载完成
        while (xmlDoc.readyState != 4) {}
    }
    xmlDoc.load(file);
}

importXML(url);

// 4. 更新页面显示
function updatetupiandizhi() {
    if (moz) {
        // Firefox 路径：使用 getElementsByTagName 遍历
        var ad = xmlDoc.getElementsByTagName("ad")[0];
        var tupian;
        var _tupian = ad.getElementsByTagName("tupian")[i].firstChild.nodeValue;
        
        if (_tupian) tupian = _tupian.Trim(); // 清除可能存在的空字符
        
        var dizhi;
        var _dizhi = ad.getElementsByTagName("dizhi")[i].firstChild.nodeValue;
        if (_dizhi) dizhi = _dizhi.Trim();
        
        // 更新 DOM
        document.getElementById('tupian').href = tupian;
        document.getElementById('tupian').innerHTML = '<img src="' + tupian + '" />'; // 建议修改为 img src
        document.getElementById('dizhi')?.src = dizhi; // 如果是 img 标签用 src
        
    } else if (ie) {
        // IE 路径：使用 selectNodes
        var src = xmlDoc.documentElement.selectNodes("tupian");
        var href = xmlDoc.documentElement.selectNodes("dizhi");
        
        // 直接获取 text 属性，通常不包含空白
        document.getElementById("dizhi").href = href(i).text;
        document.getElementById("tupian").src = src(i).text;
    }
}

// 调用更新函数
// 注意：由于 xml.load 是异步或非阻塞的，在实际生产中可能需要 setTimeout 或 onload 回调来确保 xmlDoc 已就绪再执行 updatetupiandizhi
updatetupiandizhi();
</script>

第4步：关键参数与兼容性说明

• activeXObject("MSXML2.DOMDocument.3.0")：这是针对 IE 6/7 的经典写法。现代 Edge 或新版 Chrome/Firefox 已不再支持 ActiveX，因此该脚本仅适用于老旧浏览器环境或本地内网应用。
• Trim() 扩展：原生 XML 节点值（nodeValue）经常因格式化缩进而包含不可见空格，导致图片无法加载或 URL 失效，必须使用正则表达式清洗。
• async = false：在 IE 中使用同步加载模式，配合 while 循环阻塞主线程直到 readyState 为 4（完成）。这在现代前端开发中被视为反模式，但在简单脚本中能避免时序错误。

第5步：完成判断与调试

保存所有文件后，在浏览器中打开包含脚本的 HTML 页面。按 F5 刷新多次，观察广告图片是否在两个预设资源间切换。若图片未显示，请按 F12 打开开发者工具查看控制台是否有“Access is denied”或“Object expected”错误，这通常意味着路径错误或浏览器不支持对应的解析引擎。

简要总结

上述就是利用 JavaScript 读写 XML 实现广告轮换兼容 IE 与 Firefox 的详细内容。该方案通过区分 DOM 接口实现了跨浏览器的数据读取，并强调了数据清洗的重要性。更多关于 JavaScript 处理 XML 数据的技巧以及历史兼容性问题解决的资料，请关注本站其它相关文章！