Javascript 不使用jQuery或fetch在多个页面上共享html文件

我想知道是否有一种简单的方法可以跨多个页面（index.html、about.html等）共享html文件（如导航栏、页眉、页脚）而不使用jQuery或fetch，而只使用html或JavaScript

假设有一个“index.html”文件和一个“common”文件夹，其中包含“navbar.html”和“footer.html”：

• index.html
• common/navbar.html
• common/footer.html

如何从navbar.html或footer.html中获取代码并将其插入index.html？

您可以使用它

<object type="text/html" data="common/navbar.html"></object>
<div>my index.html</div>
<object type="text/html" data="common/footer.html"></object>

my index.html

为资源创建一个。但是，实际上，这不是堆栈溢出的问题。对于谷歌来说，这是一个更好的问题。@ScottMarcus–fetch不是一个异步函数吗？这正是我想要避免的，因为我目前遇到了一些问题，在加载js模块之前fetch（）函数无法执行，因此我的js模块中的函数无法访问navbar.html文件中的元素（意思是：我无法通过在模块中使用“document.querySelector”访问navbar.html中的任何内容）这是非常不寻常的，尽管你可以使用普通的旧XHR对象和事件处理程序来完成。看看这个。这是一项旧技术，但现代浏览器都支持fetch API。如果你想做SPA，我可以推荐一个像angular或react这样的框架。在产品环境中进行DYI从来都不是一个好主意。此外，如果你使用使用node、PHP、ASP、Java等的ve请求（非静态）@Cunning:那么您会说，对于静态多页网站，最好直接在每个页面上重复navbar.html中的代码，而不使用上面建议的结构？@TimCc所有远程请求都是异步的，这就是为什么它们被实现为承诺。您可以随后/捕获它们，或者尝试异步/等待。您可以了解有关Pr的更多信息在线教程和YouTube视频上的omises或async/await。如果您仅限于较旧的ECMAScript标准，请尝试使用一些诸如babel之类的Transpiler。