Question

我有一个主html页面（index.html），需要构建该页面页面，动态组合几个html文件(custom_header_page.html/ custom_content_page.html/ custom_footer_page.html)。

我正在寻找一种方法来完成没有任何服务器端脚本成功。

例如

custom_header_page.html

enter image description here

custom_body_page.html

enter image description here

custom_footer_page.html

enter image description here

只是厌倦了在index.html文件中关注，是的，它正确加载但我想覆盖我的index.html的<head> </head>内容和我在＃34; custom_header.html＆＃34中添加的内容;文件。

的index.html

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"> </script>
    <title>Title</title>
</head>
<body>

    <div id="custom_header"></div>

    <div id="custom_body"></div>

    <div id="custom_footer"></div>

    <script> 
        $(function(){
          $("#custom_header").load("custom_header_page.html"); 
          $("#custom_body").load("custom_body_page.html"); 
          $("#custom_footer").load("custom_footer_page.html"); 
        });
    </script>

</body>

Answer 1

如果不使用像php这样的服务器端，你就无法编辑文件，你可以使用jquery编辑html标题，但这只是在本地浏览器上，它不会为其他人改变。

使用部分HTML创建完整的HTML文件

1 个答案: