部分呈现在HTML/JavaScript

我试图澄清我想要做什么。我有一些HTML文件，我想在其他HTML文件中部分渲染它们中的每一个，例如header.html和footer.html以观察DRY概念。部分呈现在HTML/JavaScript

HTML文件应该是这样的：

<!--render header.html--> 
<div> 
    Content 
</div> 
<!--render footer.html-->

我怎么能这样做？

来源

2012-07-22 Afshin Mehrabani

你想包括一个HTML文件的另一个内容是什么？ – starbeamrainbowlabs 2012-07-22 07:43:39

@starbeamrainbowlabs：的确，是的。 – 2012-07-22 07:45:37

你可以使用PHP或其他服务器端编程语言，还是它必须是所有客户端？ – starbeamrainbowlabs 2012-07-22 08:15:05

Here's a link（来自Google的第一个我可能会添加的），它解释了如何在各种语言中执行此操作。

另请注意，有些IDE会为您处理此问题。 Dreamweaver就是一个例子。在ASP.NET中有主页面;等等。

PHP：

<?php 
require($DOCUMENT_ROOT . "path to file/include-file.html"); 
?>

ASP：

<!--#include file="path to file/include-file.html"-->

JS：

JavaScript是另一种方式，包括你的网站的网页中的HTML。这具有不需要服务器级编程的优点。但这比服务器级别的包含方法稍微复杂一些。

将您网站常用元素的HTML保存为JavaScript 文件。任何写在这个文件中的HTML都必须使用document.write函数打印到屏幕。

使用脚本标记在您的页面上包含 JavaScript文件。
<脚本类型=“文/ JavaScript的” SRC =“文件/文件路径包括-file.js”>

使用上要包含的文件每一页相同的代码。

请注意的JS版本是不理想。
1. JS可能在浏览器中被禁用或不可用。
2.页面不会一次渲染/加载。

此外，我不认为DRY真的是这个计数。考虑使用将为您创建页面模板的IDE（例如Dreamweaver）。

如果你够勇敢（和一点点老式的），你可以不使用任何上述情况，考虑使用的iframe的内容：

<html> 
    <body> 
     <div>my header</div> 
     <iframe src="mycontent.html" /> 
     <div>my fooder</div> 
    </body> 
</html>

免责声明
我会宁可切断我自己的手，也不要执行iframe或JS方法。请深入考虑您是否真的需要需要来做到这一点。

来源

2012-07-22 07:43:23

他正试图将HTML文件包含在HTML文件中，您如何在.html扩展文件中使用php？ – DannyG 2015-10-29 20:25:11

@DannyG我的回答证明了如何在许多技术中实现这一点。虽然我不建议这样做，但如果OP想要使用HTML文件来做到这一点，那么选项就是JS或IFRAME，正如我的文章中所述。从JS部分报价：“不需要服务器级编程” – 2015-10-30 14:14:08

@DannyG JS也可以用来做XHR请求拉在内容 – 2015-10-30 14:15:41

如果您正在使用服务器端编程，您可以使用服务器端包含否则，如果你的主机文件是一个HTML文件，那么你可以使用HTML脚本标记包含了header.html和footer.html文件。虽然，不确定部分呈现HTML文件是什么意思？

来源

2012-07-22 07:44:06 Shant

我不使用任何服务器端语言。只有JavaScript，HTML和jQuery。 – 2012-07-22 07:45:13

那么在这种情况下，你可以使用script标签包括与具有HTML文件的URL src属性的HTML文件。 Flem发布的文章非常有帮助。 – Shant 2012-07-22 07:47:22

如果你只是使用普通的HTML和Javascript，您可以包括jQuery和使用AJAX请求加载另一个HTML网页在您的主页上抗衡。

看一看jQuery的 '负荷（）' 函数在这里：

http://api.jquery.com/load/

假设你有以下的html：

<div id="header"></div> 
<div id="content"></div> 
<div id="footer"></div>

您的使用情况会是这个样子：

$('#header').load('header.html'); 
$('#footer').load('footer.html');

来源

2012-07-22 07:46:47 dougajmcdonald

这将导致一个跨源请求错误对我来说： -/ – ajbraus 2015-03-31 05:48:01

如果你正试图从另一个域加载内容（除非他们已经启用了CORS） – dougajmcdonald 2015-12-17 14:16:11

...或者，如果你从一个本地的HTML文件运行这个它会做。 – marsze 2016-07-14 07:51:19

如果你正在寻找一个客户端只能这样lution是html/js只有你应该看看AngularJS和它的ngInclude语法。

http://docs.angularjs.org/#!/api/ng.directive:ngInclude

来源

2012-07-22 07:48:41 Christoph

感谢Christoph！ “ng-include src”很酷，看起来fragment.js可以做同样的工作，但会引发错误.... – dfang 2013-04-05 03:50:43

部分呈现在HTML/JavaScript

回答

相关问题