在另一个html文件中包含html

I have a html "head" template and a navigation template that I want to include in all my other html files for my site. I found this post:

我有一个html“head”模板和一个导航模板，我希望将其包含在我的网站的所有其他html文件中。我发现这篇文章：

Include another HTML file in a HTML file

在HTML文件中包含另一个HTML文件

And my question is... what if it's the header that I want to include?

我的问题是......如果它是我要包含的标题怎么办？

So for example, I have the following file structure:

例如，我有以下文件结构：

 /var/www/includes/templates/header.html
                             navigation.html

header.html might look like this:

header.html可能如下所示：

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Test Portal</title>

 </head>

In a case like this, can I still follow the example in the other post where they create a div and populate the div via jquery?

在这样的情况下，我是否仍然可以按照其他帖子中的示例创建div并通过jquery填充div？

4 个解决方案

#1

I think it would be best way to include an html content/file into another html file using jQuery.

我认为使用jQuery将html内容/文件包含到另一个html文件中是最好的方法。

You can simply include the jQuery.js and load the HTML file using $("#DivContent").load("yourFile.html");

你可以简单地包含jQuery.js并使用$（“＃DivContent”）加载HTML文件.load（“yourFile.html”）;

For example

例如

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#DivContent").load("another_file.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="DivContent"></div>
  </body> 
</html>

There are no such a tags available to include the file but There are some third party methods available like this .

没有这样的标签可用于包含该文件但是有一些第三方方法可用。

<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>

<body>

<div w3-include-html="content.html"></div> 

<script>
w3IncludeHTML();
</script>

</body>
</html>

Some people also used

有些人也用过

<!--#include virtual="a.html" -->

#2

I needed to include many files. So I created the following script:

我需要包含很多文件。所以我创建了以下脚本：

<script>
  $(function(){
    $('[id$="-include"]').each(function (e){
        $(this).load("includes\\" + $(this).attr("id").replace("-include", "") +  ".html");
    });
  });
</script>

Use div, for example, to put a placeholder for the insertion.

例如，使用div为插入添加占位符。

<div id="example-include"></div>

Created folder "includes" for all files I needed to include. Created file "example.html". It works with any number of includes. You just have to use the name convention and put all included files in the right folder.

为我需要包含的所有文件创建文件夹“includes”。创建文件“example.html”。它适用于任何数量的包含。您只需使用名称约定并将所有包含的文件放在正确的文件夹中。

#3

Using HTML tag.

使用HTML标记。

I have faced similar problem , then I used

我遇到过类似的问题，然后我就用了

<iframe src = "b.html" height="80px" width="500px" >

&lt;/p&gt;

#4

-3

Use php include

使用php include

so save your head as head.php and in every file you want your head add

所以保存你的head.php和你希望你的头添加的每个文件

<?php include 'path/to/file/head.php';?>

you can do the same with navigation and even a footer so you only have to change it in one place if you ever need to edit it.

您可以使用导航甚至页脚来执行相同的操作，因此您只需要在一个地方更改它，如果您需要编辑它。

so your document for a view would look something like this

所以你的视图文档看起来像这样

<?php include 'head.php';?>
<body>
    <?php include 'navigation.php';?>

    <!-- page content -->

    <?php include 'footer.php';?>
</body>

Remember to save your files as php files instead of html doing this.

请记住将文件保存为php文件而不是html执行此操作。

#1