如何将一个 HTML 页面包含到另一个没有框架/iframe 的 HTML 页面中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/676394/
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
How to include an HTML page into another HTML page without frame/iframe?
提问by praveenjayapal
I want to include an HTML page inside an HTML page. Is it possible?
我想在 HTML 页面中包含一个 HTML 页面。是否可以？
I don't want to do it in PHP, I know that in PHP, we can use includefor this situation, how can I achieve the same purely in HTML without using the iframeand frameconcept?
我不想用 PHP 来做，我知道在 PHP 中，我们可以include用于这种情况，我怎样才能在不使用iframeandframe概念的情况下纯粹在 HTML 中实现相同的功能？
采纳答案by Daniel LeCheminant
If you're just trying to stick in your own HTML from another file, and you consider a Server Side Includeto be "pure HTML" (because it kind of looks like an HTML comment and isn't using something "dirty" like PHP):
如果您只是想从另一个文件中插入您自己的 HTML，并且您认为服务器端包含是“纯 HTML”（因为它看起来像 HTML 注释，并且没有使用像 PHP 这样的“脏”东西） )：
<!--#include virtual="/footer.html" -->
回答by kennebec
You can use an object element
您可以使用对象元素
<object type="text/html" data="urltofile.html"></object>
or, on your local server, AJAX can return a string of HTML (responseText) that you can use to document.write a new window, or edit out the head and body tags and add the rest to a div or another block element in the current page.
或者，在您的本地服务器上，AJAX 可以返回一串 HTML (responseText)，您可以使用它来编写新窗口，或者编辑掉 head 和 body 标签并将其余的添加到 div 或其他块元素中当前页面。
回答by Cherian
If you mean client side then you will have to use JavaScript or frames.
Simple way to start, try jQuery
如果您的意思是客户端，那么您将不得不使用 JavaScript 或框架。
简单的入门方法，试试jQuery
$("#links").load("/Main_Page #jq-p-Getting-Started li");
More at jQuery Docs
更多在jQuery 文档
If you want to use IFrames then start with Wikipedia on IFrames
如果你想使用iframe然后用维基百科开始的IFrame
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Example</title>
</head>
<body>
The material below comes from the website http://example.com/
<iframe src="http://example.com/" height="200">
Alternative text for browsers that do not understand IFrames.
</iframe>
</body>
</html>
回答by Muis
You can use HTML5 for this:
您可以为此使用 HTML5：
<link rel="import" href="/path/to/file.html">
回答by Sam152
<iframe src="page.html"></iframe>
You will need to add some styling to this iframe. You can specify width, height, and if you want it to look like a part of the original page include frameborder="0".
您需要为此 iframe 添加一些样式。您可以指定宽度、高度，如果您希望它看起来像原始页面的一部分，则包括frameborder="0"。
There is no other way to do it in pure HTML. This is what they were built for, it's like saying I want to fry an egg without an egg.
在纯 HTML 中没有其他方法可以做到这一点。这就是他们的目的，就像说我想在没有鸡蛋的情况下煎鸡蛋。
回答by Niks
<html>
<head>
<title>example</title>
<script>
$(function(){
$('#filename').load("htmlfile.html");
});
</script>
</head>
<body>
<div id="filename">
</div>
</body>
回答by ashario
If you're willing to use jquery, there is a handy jquery plugin called "inc".
如果您愿意使用 jquery，有一个名为“inc”的方便的 jquery 插件。
I use it often for website prototyping, where I just want to present the client with static HTML with no backend layer that can be quickly created/edited/improved/re-presented
我经常将它用于网站原型设计，我只想向客户端呈现静态 HTML，没有可以快速创建/编辑/改进/重新呈现的后端层
For example, things like the menu and footer need to be shown on every page, but you dont want to end up with a copy-and-paste-athon
例如，菜单和页脚之类的内容需要显示在每一页上，但您不想以复制粘贴马拉松结束
You can include a page fragment as follows
您可以按如下方式包含页面片段
<p class="inc:footer.htm"></p>
回答by Rahul
The best which i have got: Include in your js file and for including views you can add in this way
我得到的最好的：包含在您的 js 文件中，为了包含您可以以这种方式添加的视图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Bootstrap</title>
<!-- Your custom styles (optional) -->
<link href="css/style_different.css" rel="stylesheet">
</head>
<body>
<script src="https://www.w3schools.com/lib/w3data.js"></script>
<div class="">
<div w3-include-html="templates/header.html"></div>
<div w3-include-html="templates/dashboard.html"></div>
<div w3-include-html="templates/footer.html"></div>
</div>
</body>
<script type="text/javascript">
w3IncludeHTML();
</script>
</html>回答by Alvaro Sifuentes
$.get("file.html", function(data){
$("#div").html(data);
});
回答by Kestutis. Lithuania
You can say that it is with PHP, but actually it has just one PHP command, all other files are just *.html.
你可以说它是用PHP，但实际上它只有一个PHP命令，所有其他文件都只是*.html。
- You should have a file named .htaccess in your web server's /public_html directory, or in another directory, where your html file will be and you will process one command inside it.
- If you do not have it, (or it might be hidden (you should check this directory list by checking directory for hidden files)), you can create it with notepad, and just type one row in it:
AddType application/x-httpd-php .html - Save this file with the name .htaccess and upload it to the server's main directory.
- In your html file anywhere you want an external "meniu.html file to appear, add te command:
<?php include("meniu.html"); ?>.
- 您应该在 Web 服务器的 /public_html 目录或另一个目录中有一个名为 .htaccess 的文件，您的 html 文件将在该目录中并且您将在其中处理一个命令。
- 如果您没有它（或者它可能是隐藏的（您应该通过检查隐藏文件的目录来检查此目录列表）），您可以使用记事本创建它，然后在其中键入一行：
AddType application/x-httpd-php .html - 使用名称 .htaccess 保存此文件并将其上传到服务器的主目录。
- 在你的 html 文件中你想要一个外部“meniu.html 文件出现的任何地方，添加 te 命令：
<?php include("meniu.html"); ?>。
That's all!
就这样！
Remark: all commands like <? ...>will be treated as php executables, so if your html have question marks, then you could have some problems.
备注：所有类似的命令<? ...>都将被视为 php 可执行文件，因此如果您的 html 有问号，那么您可能会遇到一些问题。
