Включить другой файл HTML в файл HTML - PullRequest
Новая
       72

Включить другой файл HTML в файл HTML

560 голосов
/ 24 января 2012

У меня есть 2 файла HTML, предположим, a.html и b.html. В a.html я хочу включить b.html.

В JSF я могу сделать это так: 

<ui:include src="b.xhtml" />

Это означает, что внутри a.xhtml файла я могу включить b.xhtml.

Как мы можем сделать это в *.html файле?

Ответы [ 30 ]

631 голосов
/ 25 января 2012

На мой взгляд, лучшее решение использует jQuery:

a.html: 

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("b.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

b.html: 

<p>This is my include file</p>

Этот метод прост иЧистое решение моей проблемы.

Документация jQuery .load() здесь .

134 голосов
/ 06 марта 2013

Мое решение похоже на приведенное выше lolo .Однако я вставляю HTML-код через JavaScript document.write вместо использования jQuery:

a.html: 

<html> 
  <body>
  <h1>Put your HTML content before insertion of b.js.</h1>
      ...

  <script src="b.js"></script>

      ...

  <p>And whatever content you want afterwards.</p>
  </body>
</html>

b.js: 

document.write('\
\
    <h1>Add your HTML code here</h1>\
\
     <p>Notice however, that you have to escape LF's with a '\', just like\
        demonstrated in this code listing.\
    </p>\
\
');

Причина, по которой я против использования jQuery, заключается в том, что размер файла jQuery.js составляет ~ 90 КБ, и я хочу, чтобы объем загружаемых данных был как можно меньшим.

Чтобы получить правильно экранированный файл JavaScript без особых усилий, вы можете использовать следующую команду sed: 

sed 's/\\/\\\\/g;s/^.*$/&\\/g;s/'\''/\\'\''/g' b.html > escapedB.html

Или просто использовать следующий удобный скрипт bash, опубликованный как Gist на Github, который автоматизирует все необходимоеработать, преобразовывая b.html в b.js: https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6

Кредиты в Грег Минсхалл для улучшенной команды sed, которая также экранирует обратную косую черту и одинарные кавычки, что и сделала моя оригинальная команда sedне считают.

132 голосов
/ 05 августа 2015

Расширяя ответ lolo сверху, здесь есть немного больше автоматизации, если вам нужно включить много файлов: 

<script>
  $(function(){
    var includes = $('[data-include]');
    jQuery.each(includes, function(){
      var file = 'views/' + $(this).data('include') + '.html';
      $(this).load(file);
    });
  });
</script>

А затем включить что-то в html: 

<div data-include="header"></div>
<div data-include="footer"></div>

Что будет включать в себя файлы views / header.html и views / footer.html

80 голосов
/ 03 марта 2014

Checkout HTML5 импортирует с помощью учебника Html5rocks и Polymer-Project

Например: 

<head>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>
57 голосов
/ 13 января 2014

Бесстыдный плагин библиотеки, которую я написал, решает эту проблему.

https://github.com/LexmarkWeb/csi.js

<div data-include="/path/to/include.html"></div>

Приведенное выше примет содержимое /path/to/include.html и заменит div на него.

43 голосов
/ 14 апреля 2013

Простая серверная директива include для включения другого файла, найденного в той же папке, выглядит следующим образом: 

<!--#include virtual="a.html" -->
33 голосов
/ 19 апреля 2013

A очень старое решение Я тогда удовлетворял свои потребности, но вот как это сделать в соответствии со стандартами: 

<!--[if IE]>
<object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="some.html">
<p>backup content</p>
</object>
<![endif]-->

<!--[if !IE]> <-->
<object type="text/html" data="some.html">
<p>backup content</p>
</object>
<!--> <![endif]-->
30 голосов
/ 27 ноября 2013

Нет необходимости в скриптах.Нет необходимости делать какие-либо модные вещи на стороне сервера (хотя это, вероятно, было бы лучшим вариантом) 

<iframe src="/path/to/file.html" seamless></iframe>

Поскольку старые браузеры не поддерживают бесшовные, вы должны добавить некоторые CSS, чтобы исправить это: 

iframe[seamless] {
    border: none;
}

Имейте в виду, что для браузеров, которые не поддерживают бесшовные, если вы щелкнете ссылку в iframe, она заставит frame перейти по этому URL, а не по всему окну.Чтобы обойти это, нужно, чтобы все ссылки имели target="_parent", хотя поддержка браузера «достаточно хороша».

16 голосов
/ 24 января 2012

В качестве альтернативы, если у вас есть доступ к файлу .htaccess на вашем сервере, вы можете добавить простую директиву, которая позволит интерпретировать php для файлов, заканчивающихся расширением .html. 

RemoveHandler .html
AddType application/x-httpd-php .php .html

Теперь вы можете использовать простой PHP-скрипт для включения других файлов, таких как: 

<?php include('b.html'); ?>
14 голосов
/ 20 мая 2014

Следующие работы, если необходимо включить html-контент из какого-либо файла: Например, следующая строка будет содержать содержимое piece_to_include.html в месте, где происходит определение OBJECT. 

...text before...
<OBJECT data="file_to_include.html">
Warning: file_to_include.html could not be included.
</OBJECT>
...text after...

Ссылка:http://www.w3.org/TR/WD-html40-970708/struct/includes.html#h-7.7.4

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...