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

627

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

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

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

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

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

javascript html include Лоло
источник

5

Возможный дубликат эквивалента include () в HTML

Уэсли Мёрч

32

НЕТ! это 2 разные вещи!

Лоло

связанные, но для localhost: stackoverflow.com/questions/7542872/…

cregox

MarMarAba

См. HTML-модули github.com/w3c/webcomponents/blob/gh-pages/proposals/… and groups.google.com/a/chromium.org/forum/#!msg/blink-dev/… и github.com/w3c / веб-компоненты / BLOB / GH-страницы / предложения / ... и фон обсуждение на github.com/w3c/webcomponents/issues/645 и какой - то вопрос обсуждения на github.com/w3c/webcomponents/issues/783

sideshowbarker

687

На мой взгляд, лучшее решение использует 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()находится здесь .

Лоло
источник

5

В чем разница только с этим `<script> $ (" # includesContent "). Load (" b.html "); </ script>?

Родриго Руис

10

@RodrigoRuiz $(function(){})будет выполняться только после окончания загрузки документа.

ProfK

8

Если к включенному HTML-файлу прикреплен CSS, это может испортить стиль вашей страницы.

Омар Jaafor

6

Я точно такой же, как вы упомянули. Я использую bootstrap и перезаписываю css для B.html. Когда я использую B.html в A.html, чтобы он стал заголовком A.html, я вижу, что CSS потерял свой приоритет и имеет другой макет. Какие-нибудь решения для этого?

Паван Диттакави

38

Это требует сервера . При использовании его в локальном файле:

XMLHttpRequest cannot load file:///.../b.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Basj

155

Расширяя ответ 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

mhanisch
источник

Очень полезный. Есть ли способ передать аргумент через другой параметр данных, например, data-argumentи получить его во включенном файле?

Крис

@chris Вы можете использовать параметры GET, например,$("#postdiv").load('posts.php?name=Test&age=25');

Nam G VU

5

Небольшое предложение - вам не нужно class="include"- просто сделайте свой селектор jQueryvar includes = $('[data-include]');

jbyrd

не работает в chrome с локальными файлами «Запросы перекрестного происхождения поддерживаются только для протокольных схем: htt»

Артем Бернацкий

2

@ArtemBernatskyi Помогает ли это, когда вы вместо этого запускаете локальный сервер? Вот простое руководство: developer.mozilla.org/en-US/docs/Learn/Common_questions/…

mhanisch

146

Мое решение похоже на одну из Лоло выше. Тем не менее, я вставляю 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 не учитывала.

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

b.js:

document.write(`

    <h1>Add your HTML code here</h1>

     <p>Notice, you do not have to escape LF's with a '\',
        like demonstrated in the above code listing.
    </p>

`);

Tafkadasoh
источник

4

@TrevorHickey Да, вы правы, это недостаток моего решения, и это не очень элегантно. Однако, поскольку вы можете вставить '\' с простым регулярным выражением в конце каждой строки, это работает для меня лучше всего. Хм ... может быть, я должен добавить к своему ответу, как сделать вставку с помощью регулярных выражений ...

Tafkadasoh

2

О, боже, это ужасно - нет, спасибо. Я предпочел бы написать свой HTML как HTML. Мне все равно, могу ли я использовать sed в командной строке - я не хочу полагаться на это каждый раз, когда меняю содержимое шаблона.

Jbyrd

1

@Goodra Он должен работать на любом HTML без 'пометок в нем. Если вы просто выполняете поиск / замену, чтобы заменить ` with \ `THEN, найти / заменить, чтобы заменить 'на \ \'и новые строки на` `новые строки, это будет работать нормально.

wizzwizz4

1

@ wizzwizz4: Благодаря Грегу команда sed теперь также избегает одинарных кавычек и обратной косой черты. Кроме того, я добавил скрипт bash, который сделает всю работу за вас. :-)

Tafkadasoh

1

Вы можете использовать обратные пометки `- тогда вы сможете вставлять выражения, как ${var}- вам нужно только бежать \`и\$

inetphantom

85

Оформить заказ импорта HTML5 с помощью учебника Html5rocks и проекта Polymer

Например:

<head>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>

user1587439
источник

27

Импорт HTML не предназначен для непосредственного включения контента на страницу. Код в этом ответе stuff.htmlдоступен только в качестве шаблона на родительской странице, но вам придется использовать сценарии для создания клонов его DOM на родительской странице, чтобы они были видны пользователю.

Валдириус

1

Инструкции на html5rocks.com для вставки содержимого одной HTML-страницы в другую, похоже, пока не работают во многих браузерах. Я пробовал это в Opera 12.16 и Superbird версии 32.0.1700.7 (233448) без эффекта (на Xubuntu 15.04). Я слышал, что он не работает в Firefox (из-за ошибки, которая, надеюсь, была исправлена) или во многих версиях Chrome. Таким образом, хотя это выглядит как идеальное решение в будущем, это не кросс-браузерное решение.

Brōtsyorfuzthrāx

1

По-видимому, не готов на конец 2016 года в FireFox (45.5.1 ESR). JS консоль говорит: TypeError: ... .import is undefined. MDN говорит: «В настоящее время эта функция не реализована ни в одном браузере». Кто-нибудь знает, возможно ли построить FF с этой функцией?

sphakka

3

Firefox не будет поддерживать это. Чтобы включить его, попробуйте установить «dom.webcomponents.enabled». Он будет работать только в Chrome и Opera, Android с обновляемым веб-представлением (начиная с 4.4.3). Браузеры Apple не поддерживают его. Это похоже на хорошую идею для веб-компонентов, но пока еще не реализовано широко.

Максим

9

Обновление в конце 2018 года: импорт HTML, по-видимому, почему-

В. Рубинетти,

60

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

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

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

Выше будет взять содержимое /path/to/include.htmlи заменить divего.

Майкл Марр
источник

4

Будет ли это оценивать JavaScript, если в include.html он встроен?

Сет

1

@ Кажется, это не так. Я собираюсь поиграть с SRC и посмотреть, смогу ли я сделать это сделать. Благодаря

Майклу-Марру

2

Brilliant !!!! Кажется, ваше единственное решение ЗАМЕНЯЕТ тег div, используемый в качестве токена для того, куда вставлять. Я собираюсь изучить источник позже! :-)

kpollock

1

спасибо, что это работает, он включает в себя HTML / CSS, но не Javascript из исходных файлов. Вы просто должны включить его снова, где вы используете <div data-include="/path/to/include.html"></div>. Этот инструмент упрощает создание простого многостраничного макета без плагинов.

Винсент Тан

1

я могу использовать эту библиотеку в любом приложении? Я имею в виду, как можно кредитовать автора? У W3School есть похожее решение, единственное отличие состоит в том, что ваш код обслуживает рекурсивный вызов и при загрузке окна .... w3schools.com/howto/tryit.asp?filename=tryhow_html_include_1

yeppe

43

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

<!--#include virtual="a.html" -->

Webdesign7 Лондон
источник

21

Вам необходимо настроить сервер для использования SSI

lolo

7

Вот справочник по настройке SSI для вашего сервера: httpd.apache.org/docs/2.4/howto/ssi.html#configuring

шаси кант

Может быть , стоит попробовать , а также

jimmyjudas

Включение SSI значительно замедляет работу Web-сервера (поэтому его следует избегать до полной необходимости).

Амит Верма

36

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

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

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

iframe[seamless] {
    border: none;
}

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

bjb568
источник

7

кажется, что он не применяет CSS-стили с родительской страницы, например.

Рэнди

5

@ Рэнди Так? Это можно считать плюсом (особенно для пользовательского контента и т. П.). В любом случае, вы легко можете снова включить файлы css, не отправляя другой запрос из-за кэширования.

bjb568

Отвечал на мои потребности в ответе на этот вопрос - как включить HTML-файл в другой HTML-файл ...

Grimxn

2

Это лучший ответ без JQuery или сценариев. Хороший bjb568 спасибо!

DBS

12

seamlessАтрибут был удален из HTML проекта он пришел. Не используйте это.

Митя,

33

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

<!--[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]-->

Александар Вацич
источник

9

Оказывается , что <object>, <embed>и <iframe>все работают, но во всех трех случаях они создают отдельные документы с собственными стайлинга и сценариев контекстов (IFrame в частности , включает уродливые границы и полосы прокрутки), и, например , любые ссылки открытыми по умолчанию в них , а не на родительская страница (хотя это можно переопределить с помощью target = "_ parent"). Из всех этих, iframe - единственная, у которой есть надежда стать более интегрированной с помощью seamlessатрибута HTML5 (упомянутого bjb568), но он пока не очень хорошо поддерживается: caniuse.com/#feat=iframe-seamless

waldyrious

2

iframe-seamless удалено из стандарта HTML: github.com/whatwg/html/issues/331 . Так что @waldyrious комментарий больше не является правильным (можете обновить его свой комментарий?)

Tomáš Pospíšek

1

Спасибо за внимание, @ TomášPospíšek. Я больше не могу редактировать свой комментарий, но, надеюсь, ваш ответ предоставит читателю необходимую оговорку. Чтобы было ясно, последнее предложение (об seamlessатрибуте) является единственной устаревшей частью - остальное все еще применяется.

Waldyrious

17

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

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

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

<?php include('b.html'); ?>

rtd1123
источник

28

Да, это очень плохой совет. HTML-файлы статичны и очень быстро обслуживаются Apache. Если вы добавите все html-файлы в анализатор php только для того, чтобы включить файлы, у вас будет много проблем с производительностью на ваших серверах. Путь javascript (jQuery или простой JS) не очень хорошие решения, но они все еще более эффективны и менее опасны, чем этот.

Gfra54

@ Gfra54 Вы имеете в виду, что у нас будут проблемы с производительностью, если мы будем использовать Apache только для этого, и мы не будем выполнять php-работу для сайта? Или это замедлится, если я использую php и эту вещь вместе?

user3459110

1

Внимание! Добавление этих строк .htaccessможет привести к тому, что htmlстраницы будут пытаться загружаться в виде файлов, а не в браузере. Проверьте сначала. Отказ от ответственности: это только что произошло со мной, когда я попробовал вышеуказанное решение. Мой .htaccessбыл пуст за исключением двух строк выше. Предостережение рекомендуется. Попробуйте использовать loloрешение jQuery (ниже).

cssyphus

Человек, я усложнял себя, хотя я делал это раньше. Спасибо за напоминание. Для нужных мне целей это не сильно влияет на производительность, поэтому я крут.

Gman

Ха, этот сокрушительный ответ - потрясающий пример нестандартного мышления. Я бы никогда не предложил это, но, возможно, спасатель, когда вам нужно немного кувалды php. :-)

moodboom

14

Если требуется включить 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

Круто чувак
источник

2

Работает как шарм, и это самое чистое решение. Это должен быть принятый ответ.

Вбокан

Согласен. Только одно замечание: не пытайтесь делать самозакрывающийся тег объекта. Текст после него будет удален.

Шридхар Сарнобат

Кажется, создается новый «#document», который автоматически содержит новые вложенные теги <html> и <body>. Это не сработало для моей цели; мой файл .html содержит теги <script src = "..." type = "text / javascript">; но JS получил новые ошибки ссылки.

IAM_AL_X

12

Вот мое решение на месте:

(() => {
    const includes = document.getElementsByTagName('include');
    [].forEach.call(includes, i => {
        let filePath = i.getAttribute('src');
        fetch(filePath).then(file => {
            file.text().then(content => {
                i.insertAdjacentHTML('afterend', content);
                i.remove();
            });
        });
    });
})();

<p>FOO</p>

<include src="a.html">Loading...</include>

<p>BAR</p>

<include src="b.html">Loading...</include>

<p>TEE</p>

Развернуть фрагмент

Мустафа Бурак Калкан
источник

1

ух, это проще

Ариан Сапутра

Действительно хорошее и простое решение, спасибо ^^

Remling

11

В w3.js include работает так:

<body>
<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>

Для правильного описания посмотрите на это: https://www.w3schools.com/howto/howto_html_include.asp

Кай Рисберг
источник

Если вы хотите знать, когда документ был загружен, вы можете поместить его в конец документа: <img src = "thisimagedoesnotexist.dmy" onerror = 'initDocument ()' style = 'display: none;'> Умный трюк а?

Кай Рисберг

2

не работает с Google Chrome.

Deepcell

9

Это то, что помогло мне. Для добавления блока HTML-кода из b.htmlв a.html, это должно идти в headтеге a.html:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Затем в теге body создается контейнер с уникальным идентификатором и блоком javascript для загрузки b.htmlв контейнер следующим образом:

<div id="b-placeholder">

</div>

<script>
$(function(){
  $("#b-placeholder").load("b.html");
});
</script>

Ramtin
источник

6

Чем этот ответ отличается от принятого ответа на этот вопрос?

Мухаммед Усман

2

@MohammadUsman Здесь контейнер и код javascript находятся в теге body, тогда как принятый ответ помещает их в тег head и оставляет контейнер только в теге body.

Рамтин

Это не стоит нового ответа ... это комментарий

Кеннет Селеста

8

Я знаю, что это очень старый пост, поэтому некоторые методы не были доступны тогда. Но вот мой очень простой взгляд на это (основываясь на ответе Лоло).

Он опирается на атрибуты data- * HTML5 и, следовательно, очень универсален в том смысле, что использует функцию jQuery for-each для получения каждого .class, соответствующего «load-html», и использует соответствующий ему атрибут «data-source» для загрузки содержимого:

<div class="container-fluid">
    <div class="load-html" id="NavigationMenu" data-source="header.html"></div>
    <div class="load-html" id="MainBody" data-source="body.html"></div>
    <div class="load-html" id="Footer" data-source="footer.html"></div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function () {
    $(".load-html").each(function () {
        $(this).load(this.dataset.source);
    });
});
</script>

Бен Мак
источник

7

Вы можете использовать полизаполнение HTML Imports ( https://www.html5rocks.com/en/tutorials/webcomponents/imports/ ) или это упрощенное решение https://github.com/dsheiko/html-import

Например, на странице вы импортируете HTML-блок следующим образом:

<link rel="html-import" href="./some-path/block.html" >

Блок может иметь собственный импорт:

<link rel="html-import" href="./some-other-path/other-block.html" >

Импортер заменяет директиву загруженным HTML почти так же, как SSI

Эти директивы будут обслуживаться автоматически, как только вы загрузите этот небольшой JavaScript:

<script async src="./src/html-import.js"></script>

Он будет обрабатывать импорт, когда DOM будет готов автоматически. Кроме того, он предоставляет API, который вы можете использовать для запуска вручную, для получения журналов и так далее. Наслаждаться :)

Дмитрий Шейко
источник

Куда должна идти строка скрипта в html-файле?

Эндрю Траклл

В любом месте в теле. Может быть рекурсивно размещен в содержании включенных файлов

Дмитрий Шейко

Вы проверяли это?

Бхиккху Субхути

Конечно, я сделал. Я фактически использовал это в течение многих лет. Почему спрашиваешь? Любые проблемы?

Дмитрий Шейко

Таким образом, «ключ» к этому, script async srcкажется. Опробовать это!

Джавадба

6

Большинство решений работает, но у них есть проблема с jquery :

Проблема заключается в том, что следующий код $(document).ready(function () { alert($("#includedContent").text()); }ничего не предупреждает, а не включает включенный контент

Я пишу код ниже, в моем решении вы можете получить доступ к включенному контенту в $(document).readyфункции:

(Ключ загружает включенный контент синхронно).

index.htm :

<html>
    <head>
        <script src="jquery.js"></script>

        <script>
            (function ($) {
                $.include = function (url) {
                    $.ajax({
                        url: url,
                        async: false,
                        success: function (result) {
                            document.write(result);
                        }
                    });
                };
            }(jQuery));
        </script>

        <script>
            $(document).ready(function () {
                alert($("#test").text());
            });
        </script>
    </head>

    <body>
        <script>$.include("include.inc");</script>
    </body>

</html>

include.inc :

<div id="test">
    There is no issue between this solution and jquery.
</div>

JQuery включает плагин на GitHub

Амир Саниян
источник

При использовании этого и последующем просмотре источника страницы из браузера вы видите только скрипт. Разве это не влияет на способность поисковых систем анализировать ваш сайт, в конечном итоге разрушая любые попытки SEO?

hmcclungiii

Да, этот метод уничтожает любого SEO :)

Амир Саниян

Опять же, каждый метод на основе JavaScript делает это.

wizzwizz4

5

Чтобы вставить содержимое именованного файла:

<!--#include virtual="filename.htm"-->

Стив
источник

1

используя угловые скобки для []: [! - # include virtual = "include_omega.htm" -]

St.Eve

4

Ответ Athari (первый!) Был слишком убедительным! Отлично!

Но если вы хотите передать имя страницы для включения в качестве параметра URL , этот пост имеет очень хорошее решение для использования в сочетании с:

http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html

Так это становится примерно так:

Ваш URL:

www.yoursite.com/a.html?p=b.html

Код a.html теперь становится:

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    function GetURLParameter(sParam)
    {
      var sPageURL = window.location.search.substring(1);
      var sURLVariables = sPageURL.split('&');
      for (var i = 0; i < sURLVariables.length; i++) 
      {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
      }
    }
    $(function(){
      var pinc = GetURLParameter('p');
      $("#includedContent").load(pinc); 
    });
    </script> 
  </head> 

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

Это сработало очень хорошо для меня! Надеюсь помогло :)

Масса
источник

Проблема безопасности, потому что вы можете отправить кому-нибудь эту ссылку: www.yoursite.com/a.html?p=htttp://www.linktovir.us/here.html

JoostS

4

На html5rocks.com есть очень хороший учебник по этому материалу, и это может быть немного поздно, но я сам не знал, что это существовало. У w3schools также есть способ сделать это, используя новую библиотеку w3.js. Дело в том, что это требует использования веб-сервера и объекта HTTPRequest. Вы не можете на самом деле загрузить их локально и проверить их на своей машине. Тем не менее, вы можете использовать полифилы, указанные в ссылке html5rocks вверху, или следовать их руководству. Немного волшебства JS, вы можете сделать что-то вроде этого:

 var link = document.createElement('link');
 if('import' in link){
     //Run import code
     link.setAttribute('rel','import');
     link.setAttribute('href',importPath);
     document.getElementsByTagName('head')[0].appendChild(link);
     //Create a phantom element to append the import document text to
     link = document.querySelector('link[rel="import"]');
     var docText = document.createElement('div');
     docText.innerHTML = link.import;
     element.appendChild(docText.cloneNode(true));
 } else {
     //Imports aren't supported, so call polyfill
     importPolyfill(importPath);
 }

Это создаст ссылку (может измениться на требуемый элемент ссылки, если он уже установлен), установить импорт (если он у вас еще не установлен), а затем добавить его. Затем он возьмет это и проанализирует файл в HTML, а затем добавит его к нужному элементу в div. Все это можно изменить в соответствии с вашими потребностями, начиная с добавляемого элемента и заканчивая ссылкой, которую вы используете. Я надеюсь, что это помогло, теперь это может не иметь значения, если появятся более новые и более быстрые способы без использования библиотек и сред, таких как jQuery или W3.js.

ОБНОВЛЕНИЕ: Это выдаст ошибку, говорящую, что локальный импорт был заблокирован политикой CORS. Может потребоваться доступ к Deep Web, чтобы иметь возможность использовать это из-за свойств Deep Web. (Не имеет практического смысла)

SubLock69
источник

4

Вот мой подход с использованием Fetch API и асинхронной функции

<div class="js-component" data-name="header" data-ext="html"></div>
<div class="js-component" data-name="footer" data-ext="html"></div>

<script>
    const components = document.querySelectorAll('.js-component')

    const loadComponent = async c => {
        const { name, ext } = c.dataset
        const response = await fetch(`${name}.${ext}`)
        const html = await response.text()
        c.innerHTML = html
    }

    [...components].forEach(loadComponent)
</script>

barro32
источник

3

Прямого HTML-решения для этой задачи пока нет. Даже HTML-импорт (который постоянно находится в черновике ) не сработает, потому что Import! = Include, и в любом случае потребуется некоторое волшебство JS.
Я недавно написал в VanillaJS сценарий , который как раз для включения HTML в HTML, без каких - либо осложнений.

Просто поместите в свой a.html

<link data-wi-src="b.html" />
<!-- ... and somewhere below is ref to the script ... -->
<script src="wm-html-include.js"> </script>

Это open-sourceи может дать представление (я надеюсь)

al.scvorets
источник

3

Вы можете сделать это с помощью библиотеки JavaScript jQuery следующим образом:

HTML:

<div class="banner" title="banner.html"></div>

JS:

$(".banner").each(function(){
    var inc=$(this);
    $.get(inc.attr("title"), function(data){
        inc.replaceWith(data);
    });
});

Обратите внимание, что они banner.htmlдолжны находиться в том же домене, в котором находятся другие ваши страницы, в противном случае ваши веб-страницы будут отклонять banner.htmlфайл в соответствии с политиками общего доступа к ресурсам .

Также обратите внимание, что если вы загрузите свой контент с помощью JavaScript, Google не сможет проиндексировать его, поэтому это не совсем хороший метод по причинам SEO.

AndrewL64
источник

2

Вы пробовали инъекцию iFrame?

Он внедряет iFrame в документ и удаляет себя (он должен быть в HTML DOM)

<iframe src="header.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>

С уважением

Alban Lusitanae
источник

1

Я пришел в эту тему в поисках чего-то похожего, но немного отличного от проблемы, поставленной lolo. Я хотел создать страницу HTML, содержащую алфавитное меню ссылок на другие страницы, и каждая из других страниц могла бы существовать или не существовать, и порядок их создания может быть не алфавитным (и даже не числовым). Также, как и Tafkadasoh, я не хотел раздувать веб-страницу с помощью jQuery. После изучения проблемы и экспериментов в течение нескольких часов, вот что сработало для меня, с соответствующими замечаниями:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/application/html; charset=iso-8859-1">
  <meta name="Author" content="me">
  <meta copyright="Copyright" content= "(C) 2013-present by me" />
  <title>Menu</title>

<script type="text/javascript">
<!--
var F000, F001, F002, F003, F004, F005, F006, F007, F008, F009,
    F010, F011, F012, F013, F014, F015, F016, F017, F018, F019;
var dat = new Array();
var form, script, write, str, tmp, dtno, indx, unde;

/*
The "F000" and similar variables need to exist/be-declared.
Each one will be associated with a different menu item,
so decide on how many items maximum you are likely to need,
when constructing that listing of them.  Here, there are 20.
*/


function initialize()
{ window.name="Menu";
  form = document.getElementById('MENU');
  for(indx=0; indx<20; indx++)
  { str = "00" + indx;
    tmp = str.length - 3;
    str = str.substr(tmp);
    script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = str + ".js";
    form.appendChild(script);
  }

/*
The for() loop constructs some <script> objects
and associates each one with a different simple file name,
starting with "000.js" and, here, going up to "019.js".
It won't matter which of those files exist or not.
However, for each menu item you want to display on this
page, you will need to ensure that its .js file does exist.

The short function below (inside HTML comment-block) is,
generically, what the content of each one of the .js files looks like:
<!--
function F000()
{ return ["Menu Item Name", "./URLofFile.htm", "Description string"];
}
-->

(Continuing the remarks in the main menu.htm file)
It happens that each call of the form.appendChild() function
will cause the specified .js script-file to be loaded at that time.
However, it takes a bit of time for the JavaScript in the file
to be fully integrated into the web page, so one thing that I tried,
but it didn't work, was to write an "onload" event handler.
The handler was apparently being called before the just-loaded
JavaScript had actually become accessible.

Note that the name of the function in the .js file is the same as one
of the the pre-defined variables like "F000".  When I tried to access
that function without declaring the variable, attempting to use an
"onload" event handler, the JavaScript debugger claimed that the item
was "not available".  This is not something that can be tested-for!
However, "undefined" IS something that CAN be tested-for.  Simply
declaring them to exist automatically makes all of them "undefined".
When the system finishes integrating a just-loaded .js script file,
the appropriate variable, like "F000", will become something other
than "undefined".  Thus it doesn't matter which .js files exist or
not, because we can simply test all the "F000"-type variables, and
ignore the ones that are "undefined".  More on that later.

The line below specifies a delay of 2 seconds, before any attempt
is made to access the scripts that were loaded.  That DOES give the
system enough time to fully integrate them into the web page.
(If you have a really long list of menu items, or expect the page
to be loaded by an old/slow computer, a longer delay may be needed.)
*/

  window.setTimeout("BuildMenu();", 2000);
  return;
}


//So here is the function that gets called after the 2-second delay  
function BuildMenu()
{ dtno = 0;    //index-counter for the "dat" array
  for(indx=0; indx<20; indx++)
  { str = "00" + indx;
    tmp = str.length - 3;
    str = "F" + str.substr(tmp);
    tmp = eval(str);
    if(tmp != unde) // "unde" is deliberately undefined, for this test
      dat[dtno++] = eval(str + "()");
  }

/*
The loop above simply tests each one of the "F000"-type variables, to
see if it is "undefined" or not.  Any actually-defined variable holds
a short function (from the ".js" script-file as previously indicated).
We call the function to get some data for one menu item, and put that
data into an array named "dat".

Below, the array is sorted alphabetically (the default), and the
"dtno" variable lets us know exactly how many menu items we will
be working with.  The loop that follows creates some "<span>" tags,
and the the "innerHTML" property of each one is set to become an
"anchor" or "<a>" tag, for a link to some other web page.  A description
and a "<br />" tag gets included for each link.  Finally, each new
<span> object is appended to the menu-page's "form" object, and thereby
ends up being inserted into the middle of the overall text on the page.
(For finer control of where you want to put text in a page, consider
placing something like this in the web page at an appropriate place,
as preparation:
<div id="InsertHere"></div>
You could then use document.getElementById("InsertHere") to get it into
a variable, for appending of <span> elements, the way a variable named
"form" was used in this example menu page.

Note: You don't have to specify the link in the same way I did
(the type of link specified here only works if JavaScript is enabled).
You are free to use the more-standard "<a>" tag with the "href"
property defined, if you wish.  But whichever way you go,
you need to make sure that any pages being linked actually exist!
*/

  dat.sort();
  for(indx=0; indx<dtno; indx++)
  { write = document.createElement('span');
    write.innerHTML = "<a onclick=\"window.open('" + dat[indx][1] +
                      "', 'Menu');\" style=\"color:#0000ff;" + 
                      "text-decoration:underline;cursor:pointer;\">" +
                      dat[indx][0] + "</a> " + dat[indx][2] + "<br />";
    form.appendChild(write);
  }
  return;
}

// -->
</script>
</head>

<body onload="initialize();" style="background-color:#a0a0a0; color:#000000; 

font-family:sans-serif; font-size:11pt;">
<h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;MENU
<noscript><br /><span style="color:#ff0000;">
Links here only work if<br />
your browser's JavaScript<br />
support is enabled.</span><br /></noscript></h2>
These are the menu items you currently have available:<br />
<br />
<form id="MENU" action="" onsubmit="return false;">
<!-- Yes, the <form> object starts out completely empty -->
</form>
Click any link, and enjoy it as much as you like.<br />
Then use your browser's BACK button to return to this Menu,<br />
so you can click a different link for a different thing.<br />
<br />
<br />
<small>This file (web page) Copyright (c) 2013-present by me</small>
</body>
</html>

vernonner3voltazim
источник

1

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

<head>
   <link rel="import" href="warnings.html">
</head>

Вы также можете попробовать Google Polymer

Дирал Пандья
источник

6

«просто используйте приведенный ниже код для импорта любых HTML-файлов в одну строку» - довольно неискренне. Затем вам нужно написать несколько JS, чтобы использовать любой импортированный вами контент, так что в итоге он окажется больше, чем «одна строка».

skybondsor

1

Использование обратных ссылок ES6 ``: литералы шаблона !

let nick = "Castor", name = "Moon", nuts = 1

more.innerHTML = `

<h1>Hello ${nick} ${name}!</h1>

You collected ${nuts} nuts so far!

<hr>

Double it and get ${nuts + nuts} nuts!!

`

<div id="more"></div>

Развернуть фрагмент

Таким образом, мы можем включить HTML без кавычек, включить переменные из DOM и так далее.

Это мощный движок шаблонов, мы можем использовать отдельные js-файлы и использовать события для загрузки содержимого на месте или даже для разделения всего на куски и вызова по требованию:

let inject = document.createElement('script');
inject.src= '//....com/template/panel45.js';
more.appendChild(inject);

https://caniuse.com/#feat=template-literals

NVRM
источник

1

Хороший пример - почему нет голосов (до сих пор)?

Джавадба

Эй, вы правы, в 2018 году вышесказанное было явным признаком действительно хорошего RTFM;) До этого я в значительной степени разбил этот javascriptзначок как программист-хобби.

NVRM

1

Чтобы заставить решение работать, вам нужно включить файл csi.min.js, который вы можете найти здесь .

Согласно примеру, показанному на GitHub, чтобы использовать эту библиотеку, вы должны включить файл csi.js в заголовок своей страницы, затем вам нужно добавить атрибут data-include с его значением, установленным в файл, который вы хотите включить, в контейнер элемент.

Скрыть копию кода

<html>
  <head>
    <script src="csi.js"></script>
  </head>
  <body>
    <div data-include="Test.html"></div>
  </body>
</html>

... Надеюсь, поможет.

Хамза али
источник

0

PHP - это язык сценариев на уровне сервера. Он может делать много вещей, но одним из популярных способов использования является включение документов HTML в ваши страницы, почти так же, как SSI. Как и SSI, это технология уровня сервера. Если вы не уверены, что у вас есть функциональность PHP на вашем веб-сайте, свяжитесь с вашим хостинг-провайдером.

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

Сохраните HTML для общих элементов вашего сайта в отдельных файлах. Например, ваш раздел навигации может быть сохранен как navigation.html или navigation.php. Используйте следующий код PHP, чтобы включить этот HTML на каждой странице.

<?php require($DOCUMENT_ROOT . "navigation.php"); ?>

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

Udara Pathirage
источник

0

Если вы используете какой-то фреймворк, такой как django / bootle, они часто поставляют какой-то шаблонизатор. Допустим, вы используете бутылку, и механизм шаблонов по умолчанию - SimpleTemplate Engine . И ниже чистый HTML-файл

$ cat footer.tpl
<hr> <footer>   <p>&copy; stackoverflow, inc 2015</p> </footer>

Вы можете включить footer.tpl в ваш основной файл, например:

$ cat dashboard.tpl
%include footer

Кроме того, вы также можете передать параметр в ваш dashborard.tpl.

jaseywang
источник

0

Основываясь на ответе https://stackoverflow.com/a/31837264/4360308, я реализовал эту функцию с помощью Nodejs (+ express + cheerio) следующим образом:

HTML (index.html)

<div class="include" data-include="componentX" data-method="append"></div>
<div class="include" data-include="componentX" data-method="replace"></div>

JS

function includeComponents($) {
    $('.include').each(function () {
        var file = 'view/html/component/' + $(this).data('include') + '.html';
        var dataComp = fs.readFileSync(file);
        var htmlComp = dataComp.toString();
        if ($(this).data('method') == "replace") {
            $(this).replaceWith(htmlComp);
        } else if ($(this).data('method') == "append") {
            $(this).append(htmlComp);
        }
    })
}

function foo(){
    fs.readFile('./view/html/index.html', function (err, data) {
        if (err) throw err;
        var html = data.toString();
        var $ = cheerio.load(html);
        includeComponents($);
        ...
    }
}

append -> включает содержимое в div

заменить -> заменяет div

Вы можете легко добавить больше поведения, следуя тому же дизайну

giroxiii
источник

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

Ответы: