页眉 - 页脚包含在另一个Html文件

我正在创建一个网站，我希望能够将外部html文件添加到另一个html文件。我有三个文件。一个是Header.html，另一个是index.html，另一个是footer.html。我希望在我为网站创建的每个新页面中添加页眉和页脚，以便更新页眉或页脚，并更新为包含的所有页面。我知道，而且在使用像PHP这样的服务器端编程语言之前，我已经完成了这个工作，并且我已经使用了w3schools方法。两者都在工作，但我想找到新的方式来实现HTML到另一个HTML文档，但要支持。我想普通JS方式，或者html方式。 没有jQuery。希望有人能帮助我。页眉 - 页脚包含在另一个Html文件

谢谢。

来源

2017-02-11 pro78

这个问题太宽了。已经编写了一整类框架来处理这种页面操作，称为单页面应用程序（SPAs）。你可能只是使用其中一种流行的技术，或者采用他们所使用的技术，但这比在页面上放置几行JS更具挑战性。 – Claies

谢谢@claies您的答案。我正在寻找一个没有任何框架的解决方案。我可以使用服务器端编程语言来实现我想要的，但我想知道是否有一个html或纯JavaScript的方式来做到这一点。我想将我的header.html和footer.html实现到我的所有pages.html中，并且当我对header.html或footer.html进行更新以在我的所有页面中进行更新时，它们都包含页眉和页脚。 – pro78

您可能不想使用框架，但您应该考虑复制其中一种流行框架的功能，至少。他们考虑了许多你可能不知道考虑的可能情景。对于这种格式来说，甚至会刮擦如何做到这一点的任何答案都会太长。例如： – Claies

对于大型或复杂网站，这不是一个非常可维护的方法，使用ajax获取标记文件并在页面加载时将页眉/ fooder容器附加到主体的顶部和底部。

对不起，这个答案是使用jQuery，虽然你可以在香草中完成所有这些步骤。

$.ajax({ 
    url: "/path/to/markup", 
    dataType: "html", 
    success: function(html) { 
     $(document).ready(function() { 
      $('body').prepend($(html).find('#header')); 
      $('body').append($(html).find('#footer')); 
     }); 
    } 
});

来源

2017-02-11 18:02:17 relic

尝试这种方法，这对我来说工作得很好。

你的HTML代码..

<div id="header"></div> 

<!--your body --> 

<div id="footer"></div>

JavaScript代码

function include_header() { 
document.getElementById("header").innerHTML='<object type="text/html" data="header.html" ></object>'; 
} 
function include_footer() { 
document.getElementById("footer").innerHTML='<object type="text/html" data="footer.html" ></object>'; 
}

调用这些功能DOM加载之后。像这样的东西。

document.addEventListener("DOMContentLoaded", function(event) { 
    console.log("call your functions here"); 
     include_header(); 
    include_footer(); 
    });

来源

2017-02-11 20:17:08

页眉 - 页脚包含在另一个Html文件

回答

相关问题