Включить другой HTML-файл в HTML-файл
28 ответов
на мой взгляд лучшее решение использует 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() документация здесь.
мое решение похоже на решение Лоло выше. Однако я вставляю HTML-код через документ JavaScript.напишите вместо использования 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>
б.ДШ:
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 to b.js:
https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6
кредиты Грег Minshall для улучшенной команды sed, которая также избегает обратных косых черт и одинарных кавычек, чего моя исходная команда sed не сделала считать.
расширение ответа Лоло сверху, вот немного больше автоматизации, если вам нужно включить много файлов:
<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>
который будет включать представления/заголовок файла.html и представления / нижний колонтитул.HTML-код
проверка 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 и заменить div С ним.
простые серверные директивы include, чтобы включить другой файл в той же папке выглядит так:
<!--#include virtual="a.html" -->
на очень старое решение тогда я удовлетворял свои потребности, но вот как это сделать, совместимый со стандартами код:
<!--[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]-->
нет необходимости в скриптах. Нет необходимости делать какие-либо причудливые вещи на стороне сервера (tho, что, вероятно, было бы лучшим вариантом)
<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 для включения других файлов, таких как:
<?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 to 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>
вы можете использовать polyfill импорта 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 почти так же, как SSI
эти директивы будут обслуживаться автоматически, как только вы загрузите этот небольшой JavaScript:
<script async src="./src/html-import.js"></script>
он будет обрабатывать импорт, когда DOM будет готов автоматически. Кроме того, он предоставляет API, который вы можете использовать для запуска Вручную, для получения журналов и так далее. Наслаждайтесь :)
ответ Atharis (первый!) было слишком убедительно! Очень Хорошо!
но если вы хотите передайте имя страницы, которая будет включена в качестве параметра 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>
Он работал очень хорошо для меня! Надеюсь, помогли:)
большинство решений не работает, но у них есть проблема с в jQuery:
проблема заключается в следующем коде $(document).ready(function () { alert($("#includedContent").text()); } ничего не предупреждает вместо оповещения включенного содержимого.
Я пишу приведенный ниже код, в моем решении вы можете получить доступ к включенному контенту в :
(ключ загрузки содержания синхронно.)
.НТМ:
<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>
включить.inc:
<div id="test">
There is no issue between this solution and jquery.
</div>
в w3.js включает такие работы:
<body>
<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>
html5rocks.com имеет очень хороший учебник по этому вопросу, и это может быть немного поздно, но я сам не знал, что это существует. w3schools также имеет способ сделать это, используя свою новую библиотеку под названием w3.js. Дело в том, что для этого требуется использование веб-сервера и объекта HTTPRequest. Вы не можете загрузить их локально и протестировать на своем компьютере. То, что вы можете сделать, это использовать polyfills, предоставленные по ссылке html5rocks вверху, или следовать их учебнику. С маленький JS magic, вы можете сделать что-то вроде этого:
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 или В3.js.
обновление: это вызовет ошибку, говорящую о том, что локальный импорт был заблокирован политикой CORS. Может потребоваться доступ к deep web, чтобы иметь возможность использовать это из-за свойств deep web. (Не имея в виду практического применения)
Я знаю, что это очень старый пост, поэтому некоторые методы были недоступны тогда. Но вот мой очень простой взгляд на это (основанный на ответе Лоло).
он полагается на HTML5 data-* attributes и поэтому является очень общим в том, что использует функцию jQuery for-each для получения каждого .класс, соответствующий "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>
на данный момент нет прямого решения HTML для этой задачи. Даже импорт HTML (который постоянно в проекте) не будет делать вещь, потому что импорт != Включить и некоторые JS magic будут необходимы в любом случае.
Я недавно написал a 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 и может дать идея (я надеюсь)
вы можете сделать это с помощью библиотеки 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 должен находиться под тем же доменом, что и другие ваши страницы, иначе ваши веб-страницы откажутся от из-за Совместное Использование Ресурсов Cross-Origin политика.
кроме того, обратите внимание, что если вы загружаете свой контент с помощью JavaScript, Google не будет индексировать это не совсем хороший метод по причинам SEO.
вот отличная статья, вы можете реализовать общую библиотеку и просто использовать ниже код для импорта любых HTML-файлов в одной строке.
<head>
<link rel="import" href="warnings.html">
</head>
вы также можете попробовать Google Полимер
на основе ответа 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($);
...
}
}
добавить - > включает содержимое в div
replace - > заменяет div
вы можете легко добавить больше поведения после того же дизайна
Я пришел к этой теме, ища что-то похожее, но немного отличающееся от проблемы, поставленной Лоло. Я хотел создать HTML-страницу, содержащую алфавитное меню ссылок на другие страницы, и каждая из других страниц может существовать или не существовать, а порядок их создания может не быть алфавитным (или даже числовым). Кроме того, как и Тафкадасох, я не хотел раздувать веб-страницу с помощью 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>
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>
Если вы используете некоторые рамки, такие как django/bootle, они часто отправляют некоторый механизм шаблонов. Предположим, вы используете bottle, а механизм шаблонов по умолчанию -Двигатель SimpleTemplate. И ниже приведен чистый html-файл
$ cat footer.tpl
<hr> <footer> <p>© stackoverflow, inc 2015</p> </footer>
Вы можете включить нижний колонтитул.tpl в главном файле, например:
$ cat dashboard.tpl
%include footer
кроме того, вы также можете передать параметр в свой dashborard.ТПЛ.
PHP-это язык сценариев на уровне сервера. Он может делать много вещей, но одно популярное использование-включать HTML-документы внутри ваших страниц, почти так же, как SSI. Как и SSI, это технология уровня сервера. Если вы не уверены, есть ли у вас функциональность PHP на вашем сайте, обратитесь к хостинг-провайдеру.
вот простой PHP-скрипт, который вы можете использовать для включения фрагмента HTML на любой веб-странице с поддержкой PHP:
сохраните HTML для общих элементов вашего сайта, чтобы разные файлы. Например, раздел навигации может быть сохранен как навигация.html или навигация.РНР. Используйте следующий PHP-код, чтобы включить этот HTML на каждую страницу.
<?php require($DOCUMENT_ROOT . "navigation.php"); ?>
используйте тот же код на каждой странице, которую вы хотите включить в файл. Обязательно измените имя файла higlighted на имя и путь к включенному файлу.
Ну, если все, что вы хотите сделать, это поместить текст из отдельного файла на вашу страницу (теги в тексте тоже должны работать), вы можете это сделать (ваши стили текста на главной странице-test.html-надо еще работать):
test.html
<html>
<body>
<p>Start</p>
<p>Beginning</p>
<div>
<script language="JavaScript" src="sample.js"></script>
</div>
<p>End</p>
</body>
</html>
sample.js
var data="Here is the imported text!";
document.write(data);
вы всегда можете воссоздать теги HTML, которые вы хотите сами, в конце концов. Существует необходимость в серверных сценариях только для захвата текста из другого файла, если вы не хотите что-то сделать больше.
в любом случае, я начинаю использовать это для того, чтобы сделать это так, если я обновляю описание, распространенное среди множества HTML-файлов, мне нужно обновить только один файл (.js file) вместо каждого HTML-файла, содержащего текст.
Итак, в общем, вместо импорта .html файл, более простым решением является импорт .js файл с содержимым .html файл в переменной (и записать содержимое на экран, где вы вызываете сценарий.)
Спасибо за вопрос.
использование jQuery u нужно импортировать библиотеку
Я рекомендую вам использовать php
<?php
echo"<html>
<body>";
?>
<?php
include "b.html";
?>
<?php
echo" </body>
</html>";
?>
b.html
<div>hi this is ur file :3<div>