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

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

javascript jquery html

Javascript 使用部分HTML创建完整的HTML文件,javascript,jquery,html,dhtml,Javascript,Jquery,Html,Dhtml,我有一个主html页面（index.html），需要动态地结合几个html文件构建该页面（custom\u header\u page.html/custom\u content\u page.html/custom\u footer\u page.html）我正在寻找一种方法来完成它，而不需要任何服务器端脚本例如：自定义标题页面.html custom\u body\u page.html 自定义页脚页面.html 只是厌倦了index.html文件中的以下内容，是的，它正确加载

我有一个主html页面（index.html），需要动态地结合几个html文件构建该页面

（custom\u header\u page.html/custom\u content\u page.html/custom\u footer\u page.html）

我正在寻找一种方法来完成它，而不需要任何服务器端脚本

例如：

自定义标题页面.html

custom\u body\u page.html

自定义页脚页面.html

只是厌倦了index.html文件中的以下内容，是的，它正确加载，但我想用我在“custom_header.html”文件中添加的内容覆盖index.html的

内容

index.html


标题
$（函数（）{
$（“#custom_header”）.load（“custom_header_page.html”）；
$（“#custom_body”）.load（“custom_body_page.html”）；
$（“#custom_footer”）.load（“custom_footer_page.html”）；
});

如果不使用服务器端（如php），您无法编辑文件，您可以使用jquery编辑html标题，但这只是在本地浏览器上，其他人不会更改。

为什么要这样做？服务器根据我们提供的部分html信息动态加载索引文件。这是在文件夹中本地设置，以模拟在发送设计之前检查设计的过程。是的，我们可以使用web开发工具在浏览器中本地编辑它，但我们的想法是稍后由不熟悉HTML和这些工具的人进行测试。使用不同的页眉和页脚图像等更改CSS内容。现在这样做会创建无效的HTML。您的页面将有额外的

html

和

body

标记。对于SEO也不建议这样做。为什么不使用php呢<代码>似乎比使用jquery要好得多，即使您不使用php，也可以使用vanilla js并节省一些加载时间。我不确定我是否理解你的总体逻辑here@putvande除非他将选择器更改为“加载”，否则您是正确的。Ie

load（'url.com#idOrClassOfElement'）

是的，搜索引擎不会看到这些html文件，它只会看到空白文档。你必须知道搜索引擎在爬网时实际看到的是什么。为什么这只适用于本地浏览器，而不适用于其他所有人？如果“其他人”都去OPs网站，他们不是都在使用“本地浏览器”吗？HTML、CSS、jquery都是客户端语言。如果您创建了一个带有div和输入框的页面，并且无论您在输入框中放置了什么，都会将其分配给div，那么它就不在那里了。它也不会为其他任何人显示。OP仅使用

load

加载另一个HTML页面。这对任何人都适用，每个人都看到同样的东西。$（“head”）.load（“custom_header_page.html”）；是的，我想jbyrne对OP的要求感到困惑。他没有投入任何东西。他有三个不同的HTML文件，都是静态的。在另一个页面上，使用ajax加载这些静态页面，创建一个动态页面。虽然从本质上讲，这根本不是最好的主意，而且最好使用php。每个人都会看到这一点。

<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>