使用JS导入HTML模块

Question

我刚开始学编程和 JavaScript。

我有一个简单的网页，其中包含一个菜单，有不同的选项（例如：结果和分析）。当你点击其中一个选项，比如“结果”，我希望它可以在同一个网页上显示另一个 HTML 页面中的一部分内容（不重新加载页面），这个 HTML 页面存在于另一个文件中。为什么呢？因为“结果”内容太大了，如果写在 main.js 文件中会很麻烦，所以需要从另一个 HTML 文件中加载。

我想到 (但也可能有其他方法) 使用事件监听器通过 JavaScript 导入 results.html。但是我不确定具体该怎么做，需要用到 HTML 模块吗？

- Louis.vgn

Answer 1

针对您的问题，有不同的解决方案：

1. 使用 fetch() 从服务器加载数据，并在需要时将其呈现到视图中。
2. 使用 动态导入，使用 import(...) 加载整个模块，包括您的数据和视图。

我个人的建议是选择第一种方法，只在需要时加载数据。

- Willi Pasternak

---

使用1.时，当你说服务器时，是指后端服务器吗？我只负责这个任务的前端部分。它仍然可以工作吗？ - Louis.vgn

那么，你的数据从哪里获取？ - Willi Pasternak

我猜是从服务器上获取的，对吗？ - Louis.vgn

好的，所以我使用了这个答案来获取我的文档，但问题是我得到了[object HTMLDocument]，但我想要的是HTMLDocument的内容。我该怎么做才能获取它？ - Louis.vgn

你需要将HTML文档添加到DOM中。你可以使用document.insertAdjacentHTML将字符串内容添加到DOM中。 - Willi Pasternak