如何在页面加载时用JavaScript随机加载HTML文件到页面中？

你的代码现在只是把HTML文件的URL字符串直接输出到页面里，自然看不到实际内容。要加载并显示文件里的HTML，得先发起请求获取文件内容，再把内容赋值给元素的innerHTML。以下是修改后的实现：

方案一：使用现代的Fetch API #

替换原来的displayRandomMessage函数：

function displayRandomMessage() {
  var contentArea = [
      '/includes/side2.htm',
      '/includes/side3.htm',
      '/includes/side4.htm'
  ];

  var randomIndex = Math.floor(Math.random() * contentArea.length);
  var targetUrl = contentArea[randomIndex];

  // 发起请求获取HTML文件内容
  fetch(targetUrl)
    .then(response => {
      if (!response.ok) {
        throw new Error('加载文件失败');
      }
      return response.text();
    })
    .then(htmlContent => {
      var messageElement = document.getElementById("contentArea");
      messageElement.innerHTML = htmlContent;
    })
    .catch(error => {
      console.error('出错了:', error);
      // 加载失败时可以显示备用内容
      var messageElement = document.getElementById("contentArea");
      messageElement.innerHTML = '<p>内容加载失败</p>';
    });
}

页面末尾的脚本保持不变：

<script>
    window.onload = displayRandomMessage;
</script>

注意事项 #

• 确保你的HTML文件（side2.htm、side3.htm等）和主页面在同一域名下，否则会触发浏览器的同源策略限制，导致请求失败。
• 如果要兼容非常旧的浏览器（比如IE），可以改用XMLHttpRequest替代Fetch API，示例代码如下：

function displayRandomMessage() {
  var contentArea = [
      '/includes/side2.htm',
      '/includes/side3.htm',
      '/includes/side4.htm'
  ];

  var randomIndex = Math.floor(Math.random() * contentArea.length);
  var targetUrl = contentArea[randomIndex];
  var xhr = new XMLHttpRequest();
  
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        var messageElement = document.getElementById("contentArea");
        messageElement.innerHTML = xhr.responseText;
      } else {
        console.error('加载失败，状态码:', xhr.status);
        var messageElement = document.getElementById("contentArea");
        messageElement.innerHTML = '<p>内容加载失败</p>';
      }
    }
  };
  
  xhr.open('GET', targetUrl, true);
  xhr.send();
}

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