如何在HTML/JavaScript中通过可变链接打开本地文件？

根据你的使用场景（本地直接打开/服务器部署），可以用以下几种方案：

场景1：本地直接打开HTML文件（file://协议） #

浏览器出于安全限制，禁止JS直接读取本地文件，推荐两种方式：

• 静态链接列表：直接在HTML里写每个XML文件的链接，用户点击即可打开：

<ul>
  <li><a href="xxx(1).xml" target="_blank">打开xxx(1).xml</a></li>
  <li><a href="xxx(2).xml" target="_blank">打开xxx(2).xml</a></li>
  <li><a href="xxx(3).xml" target="_blank">打开xxx(3).xml</a></li>
</ul>

• 用户选择文件并展示：用文件选择器让用户手动选择多个XML文件，然后读取内容展示在页面上：

<input type="file" id="xmlFiles" multiple accept=".xml">
<div id="displayArea"></div>

<script>
document.getElementById('xmlFiles').addEventListener('change', (e) => {
  const files = e.target.files;
  const displayArea = document.getElementById('displayArea');
  displayArea.innerHTML = '';

  for (const file of files) {
    if (file.type !== 'text/xml') continue;
    const reader = new FileReader();
    reader.onload = (event) => {
      const section = document.createElement('div');
      section.innerHTML = `<h4>${file.name}</h4><pre>${event.target.result}</pre>`;
      displayArea.appendChild(section);
    };
    reader.readAsText(file);
  }
});
</script>

场景2：部署到服务器（http/https协议） #

服务器环境下浏览器限制更少，可以用JS批量处理：

• 批量打开新窗口：通过用户触发事件（比如点击按钮）打开所有XML文件，注意用_blank避免覆盖当前页面：

<button id="openAllXml">打开全部XML文件</button>

<script>
document.getElementById('openAllXml').addEventListener('click', () => {
  const xmlPaths = ['xxx(1).xml', 'xxx(2).xml', 'xxx(3).xml'];
  xmlPaths.forEach(path => {
    window.open(path, '_blank');
  });
});
</script>

提示：必须由用户主动点击触发，否则浏览器会拦截弹窗。

• 页面内批量加载展示：用fetch获取所有XML内容，解析后展示在当前页面：

<div id="xmlContainer"></div>
<button id="loadAllXml">加载全部XML内容</button>

<script>
document.getElementById('loadAllXml').addEventListener('click', async () => {
  const xmlPaths = ['xxx(1).xml', 'xxx(2).xml', 'xxx(3).xml'];
  const container = document.getElementById('xmlContainer');
  container.innerHTML = '';

  for (const path of xmlPaths) {
    try {
      const res = await fetch(path);
      const xmlContent = await res.text();
      const item = document.createElement('div');
      item.className = 'xml-item';
      item.innerHTML = `<h3>${path}</h3><pre>${xmlContent}</pre>`;
      container.appendChild(item);
    } catch (err) {
      container.innerHTML += `<p>加载${path}失败：${err.message}</p>`;
    }
  }
});
</script>

补充：你之前用window.open(path, "_self")效果不好，是因为_self会用当前页面窗口打开新文件，每次都会覆盖之前的内容，所以只能看到最后一个文件，换成_blank就能在新窗口打开每个文件。

内容的提问来源于stack exchange，提问作者emrekoc