HTML/JavaScript 中的部分渲染
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11598530/
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
Partial render in HTML/JavaScript
提问by Afshin Mehrabani
I have some HTML files, and each one of them I want to partially render in another HTML file, for example header.htmland footer.htmlin order to observe DRY concept.
我有一些 HTML 文件，每个文件我都想在另一个 HTML 文件中部分呈现，例如header.html，footer.html为了观察 DRY 概念。
HTML files should look like this:
HTML 文件应如下所示：
<!--render header.html-->
<div>
Content
</div>
<!--render footer.html-->
How can I do that?
我怎样才能做到这一点？
回答by dougajmcdonald
If you're just using plain HTML and Javascript, you could include jQuery and use an AJAX request to load the contend of another HTML page in your main page.
如果您只是使用纯 HTML 和 Javascript，您可以包含 jQuery 并使用 AJAX 请求在您的主页中加载另一个 HTML 页面的竞争。
Have a look at the jQuery 'load()' function here:
在此处查看 jQuery 'load()' 函数：
Assuming your have the following html:
假设您有以下 html：
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
your usage would look something like this:
您的用法如下所示：
$('#header').load('header.html');
$('#footer').load('footer.html');
回答by Paul Fleming
Here's a link(first one from Google I might add) that explains how to do this in various languages.
这是一个链接（我可能会添加第一个来自 Google的链接），它解释了如何以各种语言执行此操作。
Also note that some IDEs take care of this for you. Dreamweaver being one example; in ASP.NET there are master pages; and so on.
另请注意，某些 IDE 会为您处理此问题。Dreamweaver 就是一个例子；在 ASP.NET 中有母版页；等等。
PHP:
PHP：
<?php
require($DOCUMENT_ROOT . "path to file/include-file.html");
?>
ASP:
ASP：
<!--#include file="path to file/include-file.html"-->
JS:
JS：
JavaScript is another way to include HTML within the pages of your site. This has the advantage of not requiring server-level programming. But it's a little more complicated than the server-level include methods.
Save the HTML for the common elements of your site to a JavaScript file. Any HTML written in this file, must be printed to the screen with the document.write function.
Use a script tag to include the JavaScript file on your pages.
<script type="text/javascript" src="path to file/include-file.js">- Use that same code on every page that you want to include the file.
JavaScript 是另一种在网站页面中包含 HTML 的方法。这具有不需要服务器级编程的优点。但它比服务器级别的包含方法稍微复杂一些。
将站点常见元素的 HTML 保存到 JavaScript 文件。在此文件中编写的任何 HTML 都必须使用 document.write 函数打印到屏幕上。
使用脚本标记在您的页面上包含 JavaScript 文件。
<script type="text/javascript" src="文件路径/include-file.js">- 在要包含文件的每个页面上使用相同的代码。
PLEASE NOTEthat the JS version is NOTideal.
1. JS may be disabled or unavailable in the browser.
2. The page won't be rendered/loaded all at once.
请注意，JS 版本并不理想。
1. JS 可能在浏览器中被禁用或不可用。
2. 页面不会一次全部渲染/加载。
Also, I don't think DRY really counts for this one. Consider using an IDE that will create page templates for you (like Dreamweaver for example).
另外，我不认为 DRY 真的很重要。考虑使用可为您创建页面模板的 IDE（例如 Dreamweaver）。
If you are brave enough (and a little bit old fashioned) and you can't use any of the above, consider using an iframe for your content:
如果您足够勇敢（并且有点老式）并且您不能使用上述任何一种，请考虑为您的内容使用 iframe：
<html>
<body>
<div>my header</div>
<iframe src="mycontent.html" />
<div>my fooder</div>
</body>
</html>
DISCLAIMER
I would rather cut off my own hands than implement the iframe or JS approach. Give deep consideration towards whether you actually NEEDto do this.
免责声明
我宁愿砍掉自己的双手也不愿实施 iframe 或 JS 方法。对你是否真的给深思NEED做到这一点。
回答by Christoph
If you are looking for a client side only solution that is html/js only you should have a look at AngularJS and its ngIncludesyntax.
如果您正在寻找仅 html/js 的客户端解决方案，您应该查看 AngularJS 及其ngInclude语法。
回答by Shant
If you are using server-side programming, you can use server-side include else if your host file is an HTML file then you can use html SCRIPT tag to include the header.html and footer.html files. Though, am not sure as to what do you really mean by partially rendering HTML file?
如果您使用服务器端编程，您可以使用服务器端包含，否则如果您的主机文件是 HTML 文件，那么您可以使用 html SCRIPT 标签来包含 header.html 和 footer.html 文件。虽然，我不确定部分渲染 HTML 文件的真正含义是什么？
