Javascript 在另一个 html 文件中包含 html
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38837835/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Include html in another html file
提问by Happydevdays
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“头部”模板和一个导航模板，我想将它们包含在我网站的所有其他 html 文件中。我找到了这个帖子：
Include another HTML file in a HTML file
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 的另一篇文章中的示例进行操作？
回答by Punit Gajjar
Method 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 并使用加载 HTML 文件 $("#DivContent").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>
Method 2:
方法二：
There are no such 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>
Method 3:
方法三：
Some people also used server-side-includes (SSI):
有些人还使用了服务器端包含（SSI）：
<!--#include virtual="a.html" -->
回答by Maxim Trushin
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.
为我需要包含的所有文件创建文件夹“包含”。创建文件“example.html”。它适用于任意数量的包含。您只需要使用命名约定并将所有包含的文件放在正确的文件夹中。
回答by Akash Jaiswal
Using HTML tag.
使用 HTML 标签。
I have faced similar problem , then I used
我遇到了类似的问题，然后我使用了
<iframesrc = "b.html" height="80px" width="500px" >
< iframesrc = "b.html" height=" 80px" width=" 500px" >
