如何使用javascript在页面加载时随机加载html页面内的html文件？

Question

我正在尝试获取一组 html 文件（带有带链接的图像）以随机显示在网站的侧边栏上。我可以使用以下代码获取要随机显示的文件名：

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

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

  var messageElement = document.getElementById("contentArea");
  messageElement.innerHTML = randomMessage;
}

并将其放在页面末尾：

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

我只是不太幸运地无法显示实际的 html 文件。

任何帮助或指出正确的方向将不胜感激！

Answer 1

您可以使用

fetch

来获取 html

async function displayRandomMessage() {
  var contentArea = [
      'https://yesno.wtf/',
  ];

  var randomIndex = Math.floor(Math.random() * contentArea.length);
  var randomMessage = contentArea[randomIndex];
  
  const message = await fetch(randomMessage).then(r => r.text())

  var messageElement = document.getElementById("contentArea");
  messageElement.innerHTML = message;
}

window.onload = displayRandomMessage

<div id="contentArea"></div>