Includere un file HTML figlio in un file HTML padre con JavaScript
Le inclusioni sono comode per inserire uno stralcio di codice in più pagine, senza doverlo ripeterlo ogni volta uguale.Esistono sostanzialmente due metodi per includere uno stralcio di codice esterno, in un file HTML: lato-server e lato-client. Quello che vediamo adesso è realizzato con JavaScript e appartiene alle inclusioni lato-client, cioè realizzate dal browser dell'utente.
Per includere lo stralcio di codice, che nell'esempio è un menù, abbiamo bisogno di:
- Una pagina padre, che chiameremo example.htm
- Lo stralcio di codice da includere che scriveremo nel file che chiameremo menu.js
vediamo il codice della pagina padre example.htm
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="menu.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Inclusione con JavaScript</title>
</head>
<body>
<noscript>
<strong>
<p style="color:red;">Attenzione: per visualizzare correttamente questa pagina è necessario avere JavaScript attivato.</p>
</strong>
</noscript>
<script type="text/javascript">
document.write(inclusione);
</script>
</body>
</html>
e vediamo anche il codice del menù da includere nella pagina padre menu.js
inclusione="<ul><li><a href='home.htm'><span>Home</span></a></li><li><a href='prodotti.htm'><span>Prodotti</span></a><li><a href='chi.siamo.htm'><span>Chi siamo</span></a></li><li><a href='contatti.htm'><span>Contatti</span></a></li></ul>";
Spieghiamo:
Il primo codice di esempio è il file che chiameremo example.htm. È la nostra pagina padre, nella quale includeremo lo stralcio di codice.Da notare il codice alla riga 4 che richiama il file esterno menu.js;
Il codice dalla riga 11 alla 15 serve per stampare un alert, nel caso in cui l'utente abbia JavaScript disabilitato sul browser;
Il codice dalla riga 17 alla 19 stampa il contenuto del file incluso;
Il secondo codice di esempio è il file che chiameremo menu.js.
Guardandolo bene ha una stranezza: è scritto tutto su una riga senza andare mai a capo...
Questo perché la stringa che nell'esempio si chiama inclusione, non permette codice a capo.
Altra cosa che dovremo tenere a mente per evitare che il JavaScript generi un errore, è evitare l'utilizzo dei doppi apici ". Basterà utilizzare l'apice singolo '.
Ad esempio:
inclusione"<a href="http://www.example.com" title="Example">pippo</a>";
diventerà:
inclusione"<a href='http://www.example.com' title='Example'>pippo</a>";
oppure potrebbe diventare...:
inclusione"<a href=\"http://www.example.com\" title=\"Example\">pippo</a>";
Nessun commento:
Posta un commento