在另一个文件中加载页眉/页脚文件模板的最佳方法

Question

我正在尝试找到将HTML模板页眉/页脚文件加载到另一个文件中的最佳解决方案（如主页，联系信息...）。我正在使用HTML5，但如果PHP是最好的方法，我可以使用PHP Include.将其转换为PHP

现在我正在使用load() jquery函数，例如index.html文件：

    $(function(){
$("header").load("http://residenciarucab.es/rucab/generic-html/header.html")
$("footer").load("http://residenciarucab.es/rucab/generic-html/footer.html")
});

问题是如果我在script文件中有index.html在class或header.html上调用footer.html，那么script无法找到它，只有当class或id与脚本在同一文档中时才会找到它。这就是为什么我正在寻找最好的方法来解决这个问题。

Answer 1

您需要在从header.html和footer.html加载数据后进行处理。在callback complete这样做：

<script>
$("header").load("http://residenciarucab.es/rucab/generic-html/header.html",function( ) {
  //loaded html here
  // you can start to do magic with the header.html elements here.
})

$("footer").load("http://residenciarucab.es/rucab/generic-html/footer.html",function( ) {
  // loaded html here
  // you can start to do magic with the footer.html elements here.
})
</script>

但这不是最佳解决方案，您应该在服务器端渲染模板，以避免网络/浏览器问题与javascript和更好的SEO。

Answer 2

如果你需要backand语言然后使用PHP，但如果没有，那么你可以使用任何js库或框架，如React或Angular甚至更简单的VueJS