web-dev-qa-db-fra.com

Rendu partiel en HTML / JavaScript

J'ai quelques fichiers HTML, et chacun d'entre eux, je veux le rendre partiellement dans un autre fichier HTML, par exemple header.html et footer.html afin d'observer DRY concept.

Les fichiers HTML doivent ressembler à ceci:

<!--render header.html-->
<div>
    Content
</div>
<!--render footer.html-->

Comment puis je faire ça?

javascripthtmlpartial
20
Afshin Mehrabani

Voici un lien (le premier de Google, je pourrais ajouter) qui explique comment le faire dans différentes langues.

Notez également que certains IDE s'en occupent pour vous. Dreamweaver en est un exemple; dans ASP.NET, il existe des pages maîtres; etc.

PHP:

<?php
require($DOCUMENT_ROOT . "path to file/include-file.html");
?>

ASPIC:

<!--#include file="path to file/include-file.html"-->

JS:

JavaScript est une autre façon d'inclure du HTML dans les pages de votre site. Cela a l'avantage de ne pas nécessiter de programmation au niveau du serveur. Mais c'est un peu plus compliqué que les méthodes d'inclusion au niveau du serveur.

  1. Enregistrez le code HTML des éléments communs de votre site dans un fichier JavaScript. Tout code HTML écrit dans ce fichier doit être imprimé à l'écran avec la fonction document.write.

  2. Utilisez une balise de script pour inclure le fichier JavaScript sur vos pages.
    <script type = "text/javascript" src = "chemin d'accès au fichier/include-file.js">

  3. Utilisez ce même code sur chaque page que vous souhaitez inclure le fichier.

VEUILLEZ NOTER que la version JS est [~ # ~] pas [~ # ~] idéal.
1. JS peut être désactivé ou indisponible dans le navigateur.
2. La page ne sera pas rendue/chargée en une seule fois.

De plus, je ne pense pas que DRY compte vraiment pour celui-ci. Envisagez d'utiliser un IDE qui créera des modèles de page pour vous (comme Dreamweaver par exemple).

Si vous êtes assez courageux (et un peu démodé) et que vous ne pouvez utiliser aucun des éléments ci-dessus, envisagez d'utiliser un iframe pour votre contenu:

<html>
    <body>
      <div>my header</div>
      <iframe src="mycontent.html" />
      <div>my fooder</div>
    </body>
</html>

[~ # ~] Avis de non-responsabilité [~ # ~]
Je préfère me couper les mains que de mettre en œuvre l'approche iframe ou JS. Réfléchissez sérieusement à la question de savoir si vous [~ # ~] avez besoin de [~ # ~] pour ce faire.

20
Paul Fleming

Si vous utilisez simplement du HTML et du Javascript, vous pouvez inclure jQuery et utiliser une demande AJAX pour charger le contenu d'une autre page HTML dans votre page principale.

Jetez un œil à la fonction jQuery 'load ()' ici:

http://api.jquery.com/load/

En supposant que vous ayez le html suivant:

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

votre utilisation ressemblerait à ceci:

$('#header').load('header.html');
$('#footer').load('footer.html');
24
dougajmcdonald

Si vous recherchez une solution côté client uniquement en html/js, vous devriez jeter un œil à AngularJS et sa syntaxe ngInclude.

http://docs.angularjs.org/#!/api/ng.directive:ngInclude

5
Christoph

Si vous utilisez la programmation côté serveur, vous pouvez utiliser l'inclusion côté serveur sinon si votre fichier hôte est un fichier HTML, vous pouvez utiliser la balise html SCRIPT pour inclure les fichiers header.html et footer.html. Cependant, je ne suis pas sûr de ce que vous entendez vraiment par le rendu partiel d'un fichier HTML?

3
Shant