У меня есть 2 файла HTML, предположим a.html и b.html. В a.html я хочу включить b.html.
В JSF я могу сделать это так:
<ui:include src="b.xhtml" />
Это означает, что внутри файла a.xhtml я могу включить b.xhtml.
Как мы можем сделать это в файле *.html?
На мой взгляд, лучшее решение использует 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() здесь.
Расширение ответа 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>
Что будет включать представления файлов /header.html и views/footer.html
Мое решение аналогично 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 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 with a '\',
like demonstrated in the above code listing.
</p>
');
Checkout HTML5 импортирует через учебник по html5rocks и polymer-project
Например:
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
Бесстыдная вставка библиотеки, которую я написал, решила это.
https://github.com/LexmarkWeb/csi.js
<div data-include="/path/to/include.html"></div>
Вышеприведенное содержимое будет содержать /path/to/include.html и заменит его div.
Простая сторона сервера включает директиву для включения другого файла, найденного в той же папке, который выглядит следующим образом:
<!--#include virtual="a.html" -->
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]-->
Нет необходимости в скриптах. Нет необходимости делать какие-либо причудливые серверные серверы (это, вероятно, лучший вариант)
<iframe src="/path/to/file.html" seamless></iframe>
Поскольку старые браузеры не поддерживают бесшовные, вы должны добавить некоторые css, чтобы исправить их:
iframe[seamless] {
border: none;
}
Имейте в виду, что для браузеров, которые не поддерживают бесшовные, если вы нажмете ссылку в iframe, это сделает фрейм для этого URL-адреса, а не всего окна. Чтобы обойти это, чтобы все ссылки имели target="_parent", поддержка браузера "достаточно хороша".
В качестве альтернативы, если у вас есть доступ к файлу .htaccess на вашем сервере, вы можете добавить простую директиву, которая позволит интерпретировать php в файлах, заканчивающихся расширением .html.
RemoveHandler .html
AddType application/x-httpd-php .php .html
Теперь вы можете использовать простой php script для включения других файлов, таких как:
<?php include('b.html'); ?>
После работы, если необходимо включить содержимое 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
Это помогло мне. Для добавления блока 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>
Я знаю, что это очень старый пост, поэтому некоторые методы были недоступны в то время. Но вот мое очень простое решение (на основании ответа Лоло).
Он опирается на атрибуты HTML5 data- * и поэтому является очень общим в том, что использует jQuery для каждой функции для получения каждого соответствия.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>
В 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
Вы можете использовать polyfill из 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, который можно использовать для запуска вручную, для получения журналов и т.д. Наслаждаться :)
Вставить содержимое именованного файла:
<!--#include virtual="filename.htm"-->
Большинство решений работает, но у них есть проблема с 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>
Ответ 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>
Это сработало очень хорошо для меня! Надеюсь помогло :)
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. Может потребоваться доступ к глубокой сети, чтобы иметь возможность использовать это из-за свойств глубокого Интернета. (Нет практического использования)
На данный момент нет прямого решения HTML для задачи. Даже "Импорт HTML" (который постоянно находится в черновике) не будет делать этого, потому что Import!= Include, и в любом случае потребуется какая-то магия JS. < ш > Недавно я написал VanillaJS script, который предназначен для включения 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 и может дать представление (надеюсь)
Вы можете сделать это с помощью jQuery JavaScript-библиотеки следующим образом:
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-причин.
Здесь мой подход с использованием 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>
Вот отличная статья. Вы можете реализовать общую библиотеку и просто использовать ниже код для импорта любых файлов HTML в одну строку.
<head>
<link rel="import" href="warnings.html">
</head>
Вы также можете попробовать Google Polymer
Я пришел к этой теме, ища что-то подобное, но немного отличающееся от проблемы, заданной лоло. Я хотел создать 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 "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>
MENU
<noscript><br /><span style="color:#ff0000;">
Links here only work if<br />
your browser 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 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>
PHP - это язык сценариев на уровне сервера. Он может делать много вещей, но одно популярное использование - включение HTML-документов внутри ваших страниц, во многом то же, что и SSI. Подобно SSI, это технология уровня сервера. Если вы не уверены, имеете ли вы функциональность PHP на своем веб-сайте, обратитесь к вашему провайдеру хостинга.
Вот простой PHP script, который вы можете использовать для включения фрагмента HTML на любую веб-страницу с поддержкой PHP:
Сохраните HTML для общих элементов вашего сайта для разделения файлов. Например, ваш раздел навигации может быть сохранен как navigation.html или navigation.php. Используйте следующий PHP-код для включения этого HTML на каждую страницу.
<?php require($DOCUMENT_ROOT . "navigation.php"); ?>
Используйте тот же код на каждой странице, которую вы хотите включить в файл. Обязательно измените имя расширенного имени на имя и путь к вашему включенному файлу.
Если вы используете некоторую фреймворк, например, django/bootle, они часто отправляют некоторый механизм шаблонов. Скажем, вы используете бутылку, а механизм шаблонов по умолчанию - SimpleTemplate Engine. Ниже приведен чистый html файл
$ cat footer.tpl
<hr> <footer> <p>© stackoverflow, inc 2015</p> </footer>
Вы можете включить footer.tpl в свой основной файл, например:
$ cat dashboard.tpl
%include footer
Кроме того, вы также можете передать параметр в свой файл dashborard.tpl.
Основываясь на ответе fooobar.com/questions/15855/... Я реализовал эту функцию с помощью 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
replace → заменяет div
вы можете легко добавить больше способов поведения по той же схеме
Использование обратных символов 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><head>
<script src="jquery.js"></script>
<script>$(document.currentScript).load("./head-tags.html")</script>
<title>Some Page</title>
</head> Этот подход позволяет загружать внешний HTML непосредственно в <script> который вызвал $.load(). Я нашел это полезным для шаблонов моих заголовков для повторного использования на многостраничных сайтах.
Все вышеперечисленные решения не имеют ловушки событий, позволяющей JS нацеливаться на недавно включенный HTML. У многих также не было хорошей совместимости с браузером.
Поэтому я создал библиотеку для тех, кому могут понадобиться эти два преимущества перед простым HTML-скриптом включения.
Вот библиотека JS: includeme.js
Чтобы заставить Solution работать, вам нужно включить файл 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>
... надеюсь, это поможет.