У меня есть 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()
находится здесь.
Расширение Лоло'ы ответ сверху, здесь немного больше автоматизации, если вы должны включать много файлов:
<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
Мое решение похоже на решение 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 имеет размер ~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>
`);
Оформить заказ на HTML5 импорта через Html5rocks учебник и в полимерным проекта
Например:
<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
и заменить див
с ним.
Простой серверные директивы include, чтобы включить другой файл находится в той же папке выглядит так:
<!--#include virtual="a.html" -->
В очень старое решение я ее удовлетворял мои потребности, но здесь's, Как сделать это совместимый со стандартами код:
<!--[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 он будет делать frame перейти по этому URL-адресу, а не все окно. Способ обойти это, чтобы иметь все ссылки есть цель=на"_parent"` В, хотя поддержка браузеров есть "достаточно хорошо и".
В качестве альтернативы, если у вас есть доступ к файлу .htaccess на вашем сервере, вы можете добавить простую директиву, которая позволит интерпретировать php на файлах, заканчивающихся расширением .html.
RemoveHandler .html
AddType application/x-httpd-php .php .html
Теперь вы можете использовать простой php-скрипт для включения других файлов, таких как:
<?php include('b.html'); ?>
Следующие работы, если HTML-содержимого из какой-либо файл должен быть включен: Например, следующая строка будет включать в себя содержимое piece_to_include.html в том месте, где определение объекта происходит.
...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
это должно войти в голове
тег a.html
:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
Затем в теге body, контейнер выполнен с уникальным ID и блок JavaScript загрузить `b.html в контейнер следующим образом:
<div id="b-placeholder">
</div>
<script>
$(function(){
$("#b-placeholder").load("b.html");
});
</script>
Я знаю, что это очень старый пост, так что некоторые методы не были доступны тогда. Но вот мой очень простой взять на нем (на основе Лоло'ы ответ).
Он опирается на данные-* в HTML5 атрибутов и поэтому является очень универсальным, который использует jQuery'ы для каждой функции, чтобы получить каждый .соответствия на " класса;нагрузка-HTML-код" и использует соответствующие 'источник данных' атрибут для загрузки содержимого:
<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 включают в себя работы такой:
<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
Вы можете использовать полифилл импорта в формате HTML (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-код очень похож на СКУ
Эти директивы будут обслуживаться автоматически, как только вы загрузите этот небольшой JavaScript-код:
<script async src="./src/html-import.js"></script>
Это будет процесс импорта, когда дом будет готов автоматически. Кроме того, он предоставляет API, который можно использовать для запуска Вручную, чтобы получить журналы, и так далее. Наслаждайтесь :)
Большинство решений не работает, но у них есть проблема с на jQuery:
Вопрос следующий$(документ код).готовые(функция () { оповещения($(" и#includedContent и").текст()); }
предупреждений ничего, вместо того, чтобы известить содержания.
Я пишу ниже код, в моем решение, вы можете получить доступ к входит содержание в `$(документ).готовая функция:
(Ключ загрузки включен контент синхронно).
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>
включают в себя.Инк:
<div id="test">
There is no issue between this solution and jquery.
</div>
В Асари´ы ответ (первый!) было слишком много убедительных! Очень Хорошо!
Но если вы хотите, чтобы передать имя страницы, которые должны быть включены в качестве параметра 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. Дело в том, что это требует использование объекта web-сервера и класса 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);
}
Эта ссылка (может изменить для того чтобы быть разыскиваемый элемент link, если уже установлен), установить ввоз (если у вас уже есть), а затем добавить его. Его потом оттуда взять и разобрать этот файл в HTML, а затем добавить его на нужный элемент в див. Это все может быть изменено, чтобы соответствовать вашим потребностям с добавлением элемента по ссылке, которую вы используете. Я надеюсь, что это помогло, может теперь не имеет значения, если новее, быстрее, стороны вышли без использования библиотек и фреймворков, таких как jQuery или W3.js.
Обновление: это выдаст ошибку, сказав, что местные импорт был заблокирован политики CORS. Может понадобиться доступ в сеть, чтобы иметь возможность использовать это из-за свойства глубокого интернета. (Имеется в виду не практическое использование)
Нет прямой HTML-решений для задач в настоящее время. Даже HTML импорты (который постоянно в проекте) не буду делать вещи, потому что импорт != Включать и какого-нибудь 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>
Он является открытым исходным кодом и может дать идею (я надеюсь)
Вы можете сделать это с помощью JavaScript'библиотека с помощью jQuery такой:
HTML-код:
<div class="banner" title="banner.html"></div>
ДШ:
$(".banner").each(function(){
var inc=$(this);
$.get(inc.attr("title"), function(data){
inc.replaceWith(data);
});
});
Обратите внимание, что banner.html должны быть расположены в одном домене другие страницы, в противном случае ваши веб-страницы будут отказывать в файл banner.html в связи с кросс-происхождения совместное использование ресурсов политика.
Также, обратите внимание, что если вы загружаете свой контент с помощью JavaScript, Google не сможет проиндексировать его, чтобы он's не совсем хороший метод для SEO причинам.