Частичная Отрисовка в HTML / JavaScript

Я пытаюсь уточнить, что я хочу сделать. У меня есть некоторые HTML-файлы, и каждый из них я хочу частично отобразить в другом HTML-файле, например header.html и footer.html для того чтобы наблюдать сухой концепцией.

HTML-файлы должны выглядеть так:

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

как я могу это сделать?

18
html javascript partial

4 ответов

вот ссылка (первый из Google я мог бы добавить), который объясняет, как это сделать на разных языках.

также обратите внимание, что некоторые IDEs позаботятся об этом для вас. 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 в страницы вашего сайт. Это имеет преимущество не требуется уровень сервера программирование. Но это немного сложнее, чем уровень сервера включить методы.

  1. сохраните HTML для общих элементов вашего сайта в JavaScript файл. Любой HTML, написанный в этом файле, должен быть напечатан на экране вместе с документом.функция write.

  2. используйте тег сценария для включения Файл JavaScript на ваших страницах.

  3. использовать тот же код на каждой страницы, которую вы хотите включить в файл.

ОБРАТИТЕ ВНИМАНИЕ что версия JS не идеал.
1. JS может быть отключен или недоступен в браузере.
2. Страница не будет отображаться / загружаться одновременно.

кроме того, я не думаю, что сухой действительно имеет значение для этого. Рассмотрите возможность использования IDE, которая будет создавать шаблоны страниц для вас (например, Dreamweaver).

Если вы достаточно храбры (и немного старомодны), и вы не можете использовать любой из вышеперечисленных, рассмотрите возможность использования iframe для вашего контента:

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

отказ от ответственности
Я бы скорее отрезал себе руки, чем реализовал подход iframe или JS. Глубоко задумайтесь над тем, действительно ли вы нужно для этого.

19

Если вы просто используете простой HTML и Javascript, вы можете включить jQuery и использовать AJAX-запрос для загрузки другой HTML-страницы на главной странице.

посмотрите на функцию jQuery 'load ()' здесь:

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');
22

Если вы ищете решение только на стороне клиента, которое является html / js, вы должны взглянуть на AngularJS и его ngInclude синтаксис.

http://docs.angularjs.org/#!/api / ng.директива: ngInclude

5

Если вы используете серверное программирование, вы можете использовать серверное включение, если ваш файл хоста является HTML-файлом, то вы можете использовать тег HTML-скрипта для включения заголовка.html и нижний колонтитул.HTML-файл. Хотя, не уверен, что вы действительно подразумеваете под частичным рендерингом HTML-файла?

3