Inclure un autre fichier HTML dans un fichier HTML
j'ai 2 fichiers HTML, supposons a.html et b.html . Dans a.html je veux inclure b.html .
dans JSF je peux le faire comme ça:
<ui:include src="b.xhtml" />
cela signifie que dans le fichier a.xhtml , je peux inclure b.xhtml .
Comment Pouvons-nous le faire dans le fichier *.html ?
28 réponses
à mon avis, la meilleure solution utilise 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>
cette méthode est une solution simple et propre à mon problème.
jQuery .load() documentation ici .
ma solution est similaire à celle de lolo ci-dessus. Cependant, j'insère le code HTML via le document JavaScript.écrivez au lieu d'utiliser 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>\
\
');
la raison pour laquelle je suis contre l'utilisation de jQuery est que jQuery.js est ~90kb en taille, et je veux garder la quantité de données à charger aussi petit que possible.
afin d'obtenir le fichier JavaScript correctement échappé sans beaucoup de travail, vous pouvez utiliser la commande suivante sed:
sed 's/\/\\/g;s/^.*$/&\/g;s/'\''/\'\''/g' b.html > escapedB.html
ou utilisez simplement le script de bash pratique suivant publié en tant que Gist sur Github, qui automatise tous les travaux nécessaires, en convertissant b.html en b.js :
https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6
crédits à Greg Minshall pour la commande sed améliorée qui échappe aussi aux slashs en arrière et aux guillemets simples, ce que ma commande sed originale n'a pas considéré.
en élargissant la réponse de lolo d'en haut, voici un peu plus d'automatisation si vous devez inclure beaucoup de fichiers:
<script>
$(function(){
var includes = $('[data-include]');
jQuery.each(includes, function(){
var file = 'views/' + $(this).data('include') + '.html';
$(this).load(file);
});
});
</script>
et ensuite d'inclure quelque chose dans le html:
<div data-include="header"></div>
<div data-include="footer"></div>
qui inclurait les vues/en-tête de fichier.html et vues/pied de page.html
Checkout HTML5 importations via Html5rocks tutoriel et à polymère-projet
par exemple:
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
fiche éhontée d'une bibliothèque que j'ai écrit pour résoudre ceci.
https://github.com/LexmarkWeb/csi.js
<div data-include="/path/to/include.html"></div>
le texte ci-dessus reprend le contenu de /path/to/include.html et remplace le div par celui-ci.
une simple directive d'inclusion côté serveur pour inclure un autre fichier trouvé dans le même dossier ressemble à ceci:
<!--#include virtual="a.html" -->
Un très vieille solution je n'ai rencontré mes besoins dans le temps, mais voici comment le faire en respectant les standards de code:
<!--[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]-->
pas besoin de scripts. Pas besoin de faire toute fantaisie côté serveur (tho qui serait sans doute une meilleure option)
<iframe src="/path/to/file.html" seamless></iframe>
puisque les vieux navigateurs ne prennent pas en charge seamless, vous devriez ajouter quelques css pour le corriger:
iframe[seamless] {
border: none;
}
gardez à l'esprit que pour les navigateurs qui ne prennent pas en charge seamless, si vous cliquez sur un lien dans l'iframe, il fera le frame aller à cette url, pas la fenêtre entière. Une façon de contourner cela est de ont tous les liens ont target="_parent" , tho le support du navigateur est"assez bon".
Comme alternative, si vous avez accès à l' .fichier htaccess sur votre serveur, vous pouvez ajouter une directive simple qui permettra à php d'être interprétée sur les fichiers se terminant par .l'extension html.
RemoveHandler .html
AddType application/x-httpd-php .php .html
Maintenant vous pouvez utiliser un script php simple pour inclure d'autres fichiers tels que:
<?php include('b.html'); ?>
travaux suivants si le contenu html de certains fichiers doit être inclus: Par exemple, la ligne suivante inclura le contenu de piece_to_include.html à l'endroit où la définition de l'objet se produit.
...text before...
<OBJECT data="file_to_include.html">
Warning: file_to_include.html could not be included.
</OBJECT>
...text after...
référence: http://www.w3.org/TR/WD-html40-970708/struct/includes.html#h-7.7.4
C'est ce qui m'a aidé. Pour ajouter un bloc de code html de b.html à a.html , cela doit aller dans la balise head de a.html :
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
ensuite, dans l'étiquette de carrosserie, un conteneur est fabriqué avec un identifiant unique et un bloc javascript pour charger le b.html dans le conteneur, comme suit:
<div id="b-placeholder">
</div>
<script>
$(function(){
$("#b-placeholder").load("b.html");
});
</script>
Pour insérer le contenu du fichier nommé:
<!--#include virtual="filename.htm"-->
vous pouvez utiliser un polyfill D'importations HTML ( https://www.html5rocks.com/en/tutorials/webcomponents/imports / ), ou que la solution simplifiée https://github.com/dsheiko/html-import
par exemple, sur la page que vous importez le bloc HTML comme cela:
<link rel="html-import" href="./some-path/block.html" >
Le bloc peut avoir les importations de sa propre:
<link rel="html-import" href="./some-other-path/other-block.html" >
l'importateur remplace la directive par la directive HTML à peu près comme SSI
ces directives seront servies automatiquement dès que vous chargez ce petit JavaScript:
<script async src="./src/html-import.js"></script>
il traitera les importations lorsque DOM est prêt automatiquement. En outre, il expose une API que vous pouvez utiliser pour exécuter manuellement, pour obtenir des journaux et ainsi de suite. Enjoy:)
la réponse D'Atharis (la première!) a été trop concluant! Très Bon!!!
mais si vous souhaitez passer le nom de la page à inclure comme paramètre URL , ce message a une très belle solution à utiliser combiné avec:
http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html
donc il devient quelque chose comme ceci:
votre URL:
www.yoursite.com/a.html?p=b.html
le a.html le code devient:
<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>
ça a très bien marché pour moi! J'espère avoir aidé :)
la plupart des solutions fonctionne, mais ils ont un problème avec jquery :
la question Est de suivre le code $(document).ready(function () { alert($("#includedContent").text()); } n'alerte rien au lieu d'alerter le contenu inclus.
j'écris le code ci-dessous, dans ma solution vous pouvez accéder au contenu inclus dans $(document).ready fonction:
(la clé est de charger le contenu inclus de manière synchrone).
de l'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>
comprennent.inc :
<div id="test">
There is no issue between this solution and jquery.
</div>
dans w3.js à inclure les œuvres de ce genre:
<body>
<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>
html5rocks.com a un très bon tutoriel sur ce truc, et ça pourrait être un peu tard, mais je ne savais pas moi-même que ça existait. w3schools a également un moyen de le faire en utilisant leur nouvelle bibliothèque appelée w3.js. Le problème est que cela nécessite l'utilisation d'un serveur web et D'un objet HTTPRequest. Vous ne pouvez pas les charger localement et les tester sur votre machine. Ce que vous pouvez faire cependant, est d'utiliser les polyfills fournis sur le lien html5rocks en haut, ou de suivre leur tutoriel. Avec un peu de magie JS, vous pouvez faire quelque chose comme ceci:
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);
}
cela fera le lien (peut changer pour être l'élément de lien voulu si déjà défini), définira l'import (sauf si vous l'avez déjà), et l'ajoutera. Il va ensuite prendre cela et analyser le fichier en HTML, puis l'ajouter à l'élément désiré sous un div. Tout cela peut être modifié pour s'adapter à vos besoins, de l'élément d'ajout au lien que vous utilisez. J'espère que cela a aidé, il peut non pertinent maintenant si de nouveaux moyens plus rapides sont sortis sans utiliser les bibliothèques et les cadres tels que jQuery ou W3.js.
mise à JOUR: Cela provoquera une erreur en disant que le local à l'importation a été bloqué par la SCRO politique. Pourrait avoir besoin d'accéder au web profond pour être en mesure d'utiliser cela en raison des propriétés du web profond. (C'est-à-dire aucune utilisation pratique)
je sais que c'est un post très ancien, donc certaines méthodes n'étaient pas disponibles à l'époque. Mais voici mon point de vue très simple (basé sur la réponse de Lolo).
il s'appuie sur les attributs HTML5 data-* et est donc très générique en ce qu'il utilise la fonction for-each de jQuery pour obtenir chaque .correspondance de classe "load-html" et utilise son attribut 'data-source' respectif pour charger le contenu:
<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>
il n'y a pas de solution HTML directe pour la tâche pour le moment. Même importations HTML (qui est en permanence dans le projet ) ne fera pas la chose, parce que L'importation != Include et de la magie JS sera nécessaire de toute façon.
J'ai récemment écrit a VanillaJS script qui est juste pour l'inclusion HTML dans HTML, sans aucune complication.
il suffit de placer dans votre a.html
<link data-wi-src="b.html" />
<!-- ... and somewhere below is ref to the script ... -->
<script src="wm-html-include.js"> </script>
c'est open-source et peut donner une idée (j'espère)
vous pouvez le faire avec la bibliothèque JavaScript jQuery comme ceci:
HTML:
<div class="banner" title="banner.html"></div>
JS:
$(".banner").each(function(){
var inc=$(this);
$.get(inc.attr("title"), function(data){
inc.replaceWith(data);
});
});
veuillez noter que banner.html devrait être situé sous le même domaine que vos autres pages sont dans le cas contraire vos pages web refuseront le fichier banner.html en raison de Cross-Origin Resource Sharing politiques.
aussi, s'il vous plaît noter que si vous chargez votre contenu avec JavaScript, Google ne sera pas en mesure de l'indexer de sorte qu'il n'est pas exactement une bonne méthode pour des raisons de référencement.
voici un grand article , vous pouvez implémenter bibliothèque commune et juste utiliser le code ci-dessous pour importer n'importe quels fichiers HTML dans une ligne.
<head>
<link rel="import" href="warnings.html">
</head>
vous pouvez également essayer Google Polymer
basé sur la réponse de https://stackoverflow.com/a/31837264/4360308 J'ai implémenté cette fonctionnalité avec Nodejs (+express + cheerio) comme suit:
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($);
...
}
}
ajoute - > inclut le contenu dans la div
REMPLACER - > Remplace le div
vous pouvez facilement ajouter plus de comportements suivant la même conception
je suis venu à ce sujet à la recherche de quelque chose de similaire, mais un peu différent du problème posé par lolo. Je voulais construire une page HTML contenant un menu alphabétique de liens vers d'autres pages, et chacune des autres pages pourrait ou non exister, et l'ordre dans lequel elles ont été créées pourrait ne pas être alphabétique (ni même numérique). En outre, comme Tafkadasoh, Je ne voulais pas gonfler la page Web avec jQuery. Après avoir étudié le problème et expérimenté pendant plusieurs heures, voici est-ce ce qui a fonctionné pour moi, avec des remarques pertinentes ajouté:
<!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>
si vous utilisez un framework comme django/bootle, ils envoient souvent un moteur de modèle. Disons que vous utilisez la bouteille, et le moteur de modèle par défaut est moteur SimpleTemplate . Et voici le pur fichier html
$ cat footer.tpl
<hr> <footer> <p>© stackoverflow, inc 2015</p> </footer>
vous pouvez inclure le pied de page.tpl dans votre fichier principal, comme:
$ cat dashboard.tpl
%include footer
en outre, vous pouvez également passer le paramètre à votre dashborard.tpl.
PHP est un langage de script au niveau du serveur. Il peut faire beaucoup de choses, mais une utilisation populaire est d'inclure des documents HTML à l'intérieur de vos pages, à peu près la même chose que SSI. Comme SSI, il s'agit d'une technologie au niveau du serveur. Si vous n'êtes pas sûr si vous avez des fonctionnalités PHP sur votre site Web, contactez votre hébergeur.
voici un script PHP simple que vous pouvez utiliser pour inclure un extrait de HTML sur toute page Web compatible avec PHP:
Enregistrer le code HTML de la commune éléments de votre site pour séparer les fichiers. Par exemple, votre section de navigation peut être sauvegardée en tant que navigation.html ou de navigation.php. Utilisez le code PHP suivant pour inclure ce HTML dans chaque page.
<?php require($DOCUMENT_ROOT . "navigation.php"); ?>
utilisez ce même code sur chaque page que vous voulez inclure le fichier. Assurez-vous de changer le nom du fichier éclairé en nom et chemin vers votre fichier include.
Eh bien, si tout ce que vous voulez faire est de mettre le texte d'un fichier séparé dans votre page (tags dans le texte devrait fonctionner, aussi), vous pouvez le faire (vos styles de texte sur la page principale- test.html -devrait encore fonctionner):
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);
vous pouvez toujours recréer les balises HTML que vous voulez vous-même, après tout. Il y a besoin de scripts côté serveur juste pour saisir le texte d'un autre fichier, sauf si vous voulez faire quelque chose de plus.
quoi qu'il en soit, ce que je commence à utiliser ceci est de le faire si si je mets à jour une description commune parmi beaucoup de fichiers HTML, Je n'ai besoin de mettre à jour un fichier pour le faire (le fichier .js ) au lieu de chaque fichier HTML simple qui contient le texte.
donc, en résumé, au lieu d'importer un fichier .html , une solution plus simple est d'importer un fichier .js avec le contenu du fichier .html dans une variable (et d'écrire le contenu à l'écran lorsque vous appelez le script).
Merci pour la question.
une solution simple avec php:
<?php
readfile("yourpath/yourpage.html");
?>
à l'aide de jquery u besoin d'importation de la bibliothèque
je vous recommande d'utiliser php
<?php
echo"<html>
<body>";
?>
<?php
include "b.html";
?>
<?php
echo" </body>
</html>";
?>
b.html
<div>hi this is ur file :3<div>