我正在尝试将我的个人笔记转换为 HTML 并保持它们的模块化。我正在尝试让这个测试代码正常工作。
我有一个名为 main-file.html 的文件。
我还有另一个文件，名为 sub-file.html。该文件中的唯一代码是“Hello World”。
我想双击 main-file.html，这样当它在我的网络浏览器中打开时，我会看到一个带有“Hello World”字样的页面，因为 main-file.html 正在读取代码sub-file.html 并渲染它，就好像该代码位于 main-file.html 本身中一样。最终，我想引用许多子文件。
实现这个结果的最简单的代码是什么？使用 JavaScript 是可以接受的。我不想使用第三方软件、PHP、SSI、Web 服务器等，因为我希望它可以在任何开箱即用的计算机上运行，只需要一个 Web 浏览器。我也不想使用 iFrame 或对象，因为我已经尝试了好几天让它适用于我的应用程序，但如果没有大量尴尬的滚动条等，我无法让它正确渲染（除非你知道一种在没有滚动条的情况下逐个渲染每个子文件的方法，我无法弄清楚）。我只想让 main-file.html 读取 sub-file.html 中的代码，并将其视为 sub-file.html 的代码位于 main-file.html 中。
我已经与 Google Bard 和 ChatGPT 合作了几天，试图让它发挥作用，但没有成功。非常感谢任何帮助。
我尝试了这段代码，但没有成功。
<!DOCTYPE html>
<html>
<head>
<title>Main File</title>
</head>
<body>
<div id="content"></div>
<script>
// Use JavaScript to load and display content from sub-file.html
fetch('sub-file.html')
.then(response => response.text())
.then(data => {
document.getElementById('content').innerHTML = data;
})
.catch(error => {
console.error('Error loading sub-file.html:', error);
});
</script>
</body>
</html>
您不需要任何 JavaScript 来完成这个简单的任务，可以使用
iframe<!DOCTYPE html>
<html>
<head>
<title>Main File</title>
</head>
<body>
<iframe id="content" src="sub-file.html" width="100%" height="300">
</body>
</html>
唯一的限制是你必须设置一个特定的高度，如果子页面的内容较长它会出现在滚动条中。
您的代码仅在将其执行到网络服务器中时才有效。如果你像文件一样在网络浏览器中执行它，它会给你一个异常。
我个人将 HTML 笔记放在单个文件中。