Включення іншого HTML-файлу в HTML-файл

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

У JSF я можу це зробити таким чином:

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

Це означає, що всередині файлу a.xhtml я можу включити b.xhtml.

А як це зробити у файлі *.html?

BalusC
Edited question 24-го січня 2012 в 2:59
Програмування
html include
24-го січня 2012 в 2:51
11 погляди
Рішення

На мій погляд найкраще рішення використовує jQuery:

a.html:



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



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

b.html:

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

Цей метод є простим і чистим вирішенням моєї проблеми.

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

SharpC
Edited answer 4-го листопада 2016 в 11:03
Коментарі (20)

Моє рішення схоже на рішення lolo вище. Однак я вставляю HTML-код за допомогою JavaScript's document.write, а не використовую jQuery:

a.html:



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

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

      ...

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

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 має розмір ~90kb, і я хочу, щоб обсяг даних для завантаження був якомога меншим.

Для того, щоб без особливих зусиль отримати правильно екранований 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

Подяка Greg Minshall за покращену команду 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>

`);
Chris Magnuson
Edited answer 21-го жовтня 2019 в 3:24
Коментарі (10)

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

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

Тепер ви можете використовувати простий php-скрипт для включення інших файлів, таких як:

<?php include('b.html'); ?>
Коментарі (5)