Cerco di chiarire cosa voglio fare. Ho alcuni file HTML e ognuno di essi voglio renderizzare parzialmente in un altro file HTML, ad esempio header.html e footer.html per osservare il concetto DRY.Rendering parziale in HTML/JavaScript
file HTML dovrebbe essere simile a questo:
<!--render header.html-->
<div>
Content
</div>
<!--render footer.html-->
Come posso fare questo?
Here's a link (il primo da Google che potrei aggiungere) che spiega come farlo in varie lingue.
Si noti inoltre che alcuni IDE si occupano di questo per voi. Dreamweaver è un esempio; in ASP.NET ci sono pagine master; e così via.
PHP:
<?php
require($DOCUMENT_ROOT . "path to file/include-file.html");
?>
ASP:
<!--#include file="path to file/include-file.html"-->
JS:
JavaScript è un altro modo per includere HTML all'interno delle pagine del tuo sito . Questo ha il vantaggio di non richiedere la programmazione a livello di server . Ma è un po 'più complicato dei metodi di integrazione a livello di server .
Salvare il codice HTML per gli elementi comuni del vostro sito in un file JavaScript . Qualsiasi HTML scritto in questo file, deve essere stampato sullo schermo con la funzione document.write.
Utilizzare un tag script per includere il file JavaScript nelle pagine.
< script type = "text/javascript" src = "percorso di file/include-file.js">- utilizzare lo stesso codice su ogni pagina che si desidera includere il file.
NOTA BENE che la versione JS è NON ideale.
1. JS può essere disabilitato o non disponibile nel browser.
2. La pagina non verrà visualizzata/caricata tutto in una volta.
Inoltre, non penso che DRY contenga davvero per questo. Prendi in considerazione l'utilizzo di un IDE che creerà modelli di pagina per te (come ad esempio Dreamweaver).
Se siete abbastanza coraggiosi (e un po 'vecchio stile) e non è possibile utilizzare una di queste, considerare l'utilizzo di un iframe per il contenuto:
<html>
<body>
<div>my header</div>
<iframe src="mycontent.html" />
<div>my fooder</div>
</body>
</html>
NEGAZIONE
lo farei piuttosto tagliare le mie mani piuttosto che implementare l'approccio iframe o JS.Presta molta attenzione al fatto che, in realtà, per fare ciò sia effettivamente necessario BISOGNO.
Sta cercando di includere il file HTML nel file HTML, come usi php su un file di estensione .html? – DannyG
@DannyG La mia risposta dimostra come questo può essere raggiunto in un certo numero di tecnologie. Anche se non lo consiglio, se l'OP vuole farlo con i file HTML solo allora le opzioni sono JS o IFRAME come indicato nel mio post. Citazione dalla sezione JS: "non richiede programmazione a livello di server" –
@DannyG JS può anche essere usato per fare richieste XHR per inserire il contenuto. –
Se si utilizza la programmazione lato server, è possibile utilizzare include lato server se il file host è un file HTML, quindi è possibile utilizzare il tag SCRIPT html per includere i file header.html e footer.html. Tuttavia, non sono sicuro di cosa intendi davvero, in parte rendendo il file HTML?
Non uso alcuna lingua lato server. Solo JavaScript, HTML e jQuery. –
Bene in tal caso, è possibile utilizzare il tag SCRIPT per includere il file HTML con l'attributo src con l'URL del file HTML. L'articolo pubblicato da Flem è molto utile. – Shant
Se si utilizza semplicemente HTML e Javascript, è possibile includere jQuery e utilizzare una richiesta AJAX per caricare il conflitto di un'altra pagina HTML nella pagina principale.
Dai un'occhiata alla jQuery 'load()' funzione qui:
Assumendo che il avere il seguente codice HTML:
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
che l'uso sarebbe simile a questa:
$('#header').load('header.html');
$('#footer').load('footer.html');
Questo causa un errore di richiesta di origine incrociata per me: -/ – ajbraus
Lo farà se stai tentando di caricare il contenuto da un altro dominio (a meno che non abbiano abilitato CORS) – dougajmcdonald
... o se stai eseguendo questo da un file html locale . – marsze
Se stai cercando un lato client solo così attenzione che è solo html/js dovresti dare un'occhiata ad AngularJS e alla sua sintassi ngInclude.
grazie Christoph! "ng-include src" è bello, sembra che framment.js faccia lo stesso lavoro, ma genera errori .... – dfang
Vuoi includere il contenuto di un file HTML in un altro? – starbeamrainbowlabs
@starbeamrainbowlabs: Esatto, sì. –
Puoi usare PHP o un altro linguaggio di programmazione lato server, oppure deve essere tutto client side? – starbeamrainbowlabs