Я пытаюсь уточнить, что я хочу делать. У меня есть некоторые файлы HTML, и каждый из них я хочу частично отобразить в другом HTML файле, например header.html и footer.html, чтобы наблюдать концепцию DRY.
HTML файлы должны выглядеть так:
<!--render header.html-->
<div>
Content
</div>
<!--render footer.html-->
Как я могу это сделать?
Здесь ссылка (первая из 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.
Используйте тег script, чтобы включить Файл JavaScript на ваших страницах.
< script type = "text/javascript" src= "путь к файлу /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 и 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');
Если вы ищете решение только для клиентской стороны, которое представляет собой html/js, вы должны посмотреть на AngularJS и его синтаксис ngInclude.
Если вы используете программирование на стороне сервера, вы можете использовать серверную часть include else, если ваш файл хоста является файлом HTML, тогда вы можете использовать тег html SCRIPT для включения файлов header.html и footer.html. Хотя, не уверен, что вы действительно имеете в виду, частично отринув HTML файл?