Эквивалент include() в HTML
Мне было интересно, есть ли способ включить некоторый контент HTML в другой HTML, используя только HTML?
Замена PHP
<?php include("file.php"); ?>
Это возможно?
РЕДАКТИРОВАТЬ:
Это вызвало некоторую путаницу, и мне понадобился "почти html-тег", который имел функцию включения html-документа в другой.
12 ответов
Это не может быть сделано исключительно с помощью HTML. (Тем не менее, существуют iframe, но я не думаю, что в данном случае это подходит.)
Это можно сделать с помощью JavaScript. Вы получаете другой файл через Ajax и помещаете его содержимое в элемент HTML на текущей странице.
Ты пытался:
<object type="text/html" data="file.html"></object>
Бесстыдная заглушка библиотеки, которую я написал, решает эту проблему.
https://github.com/LexmarkWeb/csi.js
<div data-include="/path/to/include.html"></div>
Выше будет принимать содержимое /path/to/include.html и заменить div с этим.
HTML не имеет возможности включать дополнительный контент изначально. Однако большинство веб-серверов имеют операторы включения на стороне сервера:
SSI в Apache
SSI в IIS
Единственное, что будет iframe, который является чистым HTML. но вы также можете использовать javascript, чтобы получить страницу через AJAX и включить ее в свой дом иерархии
Да, но вы должны включить его в своем конфиге или.htaccess:
Options +Includes
AddType text/html .shtml
AddHandler server-parsed .shtml
Конечно, с этим вам нужно переименовать любой файл, включая .shtml... или вы можете использовать:
Options +Includes
AddType text/html .html
AddHandler server-parsed .html
сам синтаксис похож на комментарий:
<!--#include virtual="/footer.html" -->
Это может быть на несколько лет позже, но я так и сделал!
в первой строке после поставить эту строку!
<SCRIPT LANGUAGE="JavaScript" src="http://yourdomain.com/header.js">
затем создайте файл с именем header.js и введите содержимое файла, который вы хотите включить! вот так....
<!-- Begin
document.write('<center>');
document.write('<a href="http://alinktosomewhere.co.za">a link 1</a>');
document.write('<a href="http://alinktosomewhere.co.za">a link 1</a>');
document.write('<a href="http://alinktosomewhere.co.za">a link 1</a>');
document.write('<a href="http://alinktosomewhere.co.za">a link 1</a>');
document.write('<hr>');
document.write('</center>');
// End -->
Надеюсь, это поможет!
Если вы используете Apache, вы можете попробовать Server Side Includes,
Нет такого понятия. Чтобы сделать что-то подобное, вам придется использовать язык сценариев на стороне сервера или JavaScript.
Спустя почти 10 лет у некоторых людей все еще могут быть сомнения по этому поводу. Итак, я собираюсь объяснить простое решение, которое у нас есть сегодня в 2020 году.
Я всегда использую функцию jquery .load() и никогда не сталкивался с этим.
Exemple: ( "#content" ).load( "includes/menu.html" );
Теперь, в 2022 году, я использую Vanilla Javascript fetch().
Вот как включить файл: "newfile.html" в div: "контейнер"
// HTML
<div id="container"></div>
// JS
const loadHtmlFile = (fileName, containerId) => {
fetch(fileName).then(function (response) {
return response.text();
}).then(function (html) {
containerId.innerHTML = html;
}).catch(function (err) {
console.warn('Something went wrong.', err);
});
}
loadHtmlFile("newfile.html", container)
Отсутствие Включить \ Импорт в HTML действительно разочаровывает!
Хорошей альтернативой является "Включение на стороне сервера (SSI)" на случай, если "PHP" не поддерживается!
SSI поддерживается практически любым (если не всем) сервером веб-хостинга!
<!--#include virtual="layout.html" -->
Файл, содержащий вышеуказанную строку, должен заканчиваться расширениями ".shtml" или ".shtm"!
Действительно раздражает, что такой простой способ, как Include \ Import, не может быть выполнен самим браузером!
Как и php или Node.js, предварительная обработка HTML с использованием самого Javascript перед запуском процесса загрузки HTML должна поддерживаться в любом браузере!