如何用JavaScript在页面内切换加载其他HTML文件？

我懂你想要做的事——就像那个修改图片的示例一样，不过这次是把页面里指定区域的内容换成另一个HTML文件的内容。你之前用src属性的方法行不通，因为src是给图片、脚本这类元素用的，普通HTML容器可没有这个属性，下面给你两种靠谱的实现方法，还有需要注意的细节：

首先修正你的HTML结构 #

你原来的代码里在<body>里嵌套了<html>标签，这不符合HTML规范，会导致浏览器解析出错。咱们应该用一个普通的块级容器（比如<div>）作为要替换的目标区域，还可以加个按钮来触发切换操作：

<html>
<body>
  hey guys! here is my html page. If you click underneath, content will be changed.
  <!-- 用div作为目标替换区域，给它一个清晰的ID -->
  <div id="target-area">
    here is the text that will change when we load content from another html file
  </div>
  <!-- 点击这个按钮触发内容切换 -->
  <button onclick="loadNewContent()">点击切换内容</button>
</body>
</html>

方案一：用Fetch API（推荐，现代浏览器支持） #

这是现在最常用的异步请求方式，代码简洁易读：

function loadNewContent() {
  // 发起请求获取目标HTML文件的内容
  fetch('otherfile.html')
    .then(response => {
      // 先检查请求是否成功
      if (!response.ok) {
        throw new Error('请求失败，请检查文件路径是否正确');
      }
      // 把响应转换成文本格式（也就是HTML内容）
      return response.text();
    })
    .then(htmlContent => {
      // 获取目标容器，把它的内容替换成新的HTML
      document.getElementById('target-area').innerHTML = htmlContent;
    })
    .catch(error => {
      // 处理请求失败的情况
      console.error('加载内容时出错：', error);
      document.getElementById('target-area').innerHTML = '加载内容失败，请稍后重试';
    });
}

方案二：用XMLHttpRequest（兼容旧浏览器） #

如果需要兼容IE这类老浏览器，可以用这个方法：

function loadNewContent() {
  const xhr = new XMLHttpRequest();
  // 配置请求：GET方法，目标文件路径，异步请求
  xhr.open('GET', 'otherfile.html', true);
  
  xhr.onreadystatechange = function() {
    // 当请求完成且成功时
    if (xhr.readyState === 4 && xhr.status === 200) {
      document.getElementById('target-area').innerHTML = xhr.responseText;
    } 
    // 请求完成但失败时
    else if (xhr.readyState === 4) {
      document.getElementById('target-area').innerHTML = '加载内容失败，请稍后重试';
    }
  };
  
  // 发送请求
  xhr.send();
}

几个重要的注意事项 #

• 文件路径问题：确保otherfile.html和当前页面在同一个目录下，或者路径写正确（比如子目录的话写./subfolder/otherfile.html）。
• 跨域限制：如果你的页面是直接打开本地HTML文件（URL是file://开头），或者目标HTML文件在另一个域名下，浏览器会阻止请求。这时候最好用本地服务器运行页面（比如VS Code的Live Server插件），或者在服务器上配置CORS（跨域资源共享）。
• 目标HTML文件的内容：尽量让otherfile.html只包含需要插入的片段内容（比如只有一段文本、几个div），不要包含完整的<html>、<head>、<body>标签，否则替换后页面结构会混乱。

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