Afs*_*ani 20 html javascript partial
我试着澄清我想做什么.我有一些HTML文件,其中每一个我想在另一个HTML文件中部分渲染,例如header.html,footer.html以便观察DRY概念.
HTML文件应如下所示:
<!--render header.html-->
<div>
Content
</div>
<!--render footer.html-->
我怎样才能做到这一点？
dou*_*ald 24
如果您只是使用纯HTML和Javascript,则可以包含jQuery并使用AJAX请求加载主页中另一个HTML页面的竞争.
看看这里的jQuery'load()'函数:
假设你有以下html:
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
你的用法看起来像这样:
$('#header').load('header.html');
$('#footer').load('footer.html');
Pau*_*ing 20
这是一个链接(我可能会添加的第一个链接),它解释了如何使用各种语言执行此操作.
另请注意,某些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文件中.必须使用document.write函数将任何写入此文件的HTML打印到屏幕上.
使用脚本标记在页面上包含JavaScript文件.
<script type ="text/javascript"src ="path to file/include-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方法.对你是否真的给深思NEED做到这一点.
如果您正在寻找只有html/js的客户端解决方案,那么您应该查看AngularJS及其ngInclude语法.
http://docs.angularjs.org/#!/api/ng.directive:ngInclude
| 归档时间： |
|
| 查看次数： |
36973 次 |
| 最近记录： |