Come includere i contenuti tramite file esterno

Sommario:
L'inclusione tramite file esterno è anche utile per poter modificare alcune parti del sito su tutte le pagine contemporaneamente.
Può essere comodo, per esempio, in un sito con tante pagine, inserire il menù di navigazione con tale metodo, perchè si potranno effettuare modifiche e/o aggiungere voci solo in quei file e si ripercuoteranno, in automatico, su tutte le pagine.

Come includere contenuti tramite iFrame:

Questo è il modo più semplice per aggiungere contenuti esterni in una pagina del sito.
Un iFrame è come una finestra aperta in una pagina.
Tramite un iFrame è possibile inserire in una pagina html un'altra pagina html. Chi non è nuovo di questo sito, avrà già letto altre guide in cui ho indicato l'uso di iFrame per inserire slideshow e altro. La comodità sta nel fatto che non si appesantisce il sito e che è possibile modificare il contenuto all'origine, trasmettendo tale modifica a tutte le pagine in cui l'iFrame è contenuto.

La cartella che contiene il file.html e gli altri file, eventualmente, necessari, può essere caricata nella stessa cartella del sito, oppure in un sito di archivio, oppure ancora su un altro hosting.

Fatto questo, basta prelevare l'indirizzo del file.html e inserirlo nel codice dell'iFrame, regolando, naturalmente, le dimensioni....
<iframe width="100%" height="600" style="border: 0; display: block; border-width: 0;" src="file.html">
</iframe> 

L'iFrame dovrà essere inserito nella sezione <body> della pagina del sito e/o nel div specifico e nel punto preciso dove deve apparire l'anteprima.

Come includere contenuti usando javascript:

Primo metodo:

Prendendo come esempio una pagina del sito che avete costruito, copiate dal suo codice HTML la parte del menù che i interessa e cioè quella simile a questa sotto, compresi i tag <ul></ul> e incollatelo in un file di testo.
<ul>
       <li><a href="home.html">Home</a></li>
       <li><a href="pagina1.html">Pagina 1</a></li>
       <li><a href="pagina2.html">Pagina 2</a></li>
       <li><a href="pagina3.html">Pagina 3</a></li>
</ul>

Modificate il codice in questo modo:
.write("<ul>");
document.write("<li><a href='home.html'>Home</a></li>");
document.write("<li><a href='pagina1.html'>Pagina 1</a></li>");
document.write("<li><a href='pagina2.html'>Pagina 2</a></li>");
document.write("<li><a href='pagina3.html'>Pagina 3</a></li>");
document.write("<ul>");

Come vedete, prima di ogni riga, è stato inserito il comando "document.write". Ogni riga è stata, anche, racchiusa tra parentesi e virgolette.

Attenzione a queste regole:
  1. Mettete sempre il punto e virgola alla fine di ogni riga di comando
  2. Se le virgolette esterne (dopo e prima le parentesi) sono doppie, tutte le altre dovranno essere singole, o viceversa
Fatto questo, rinominate il file di testo e modificatene l'estensione in .js. Quindi, se prima era file.txt, diventerà file.js.

Caricate questo file sul vostro hosting, nella stessa cartella che contiene il sito.

Adesso, andate nel codice html della pagina in cui volete includere il menù e inserite questa stringa al posto della parte, corrispondente al menù, che avevate copiato all'inizio.
<script src="file.js"> </script>

Al posto di file.js, dovete mettere il nome del vostro file. Salvate.

Ecco fatto! Incollate la stessa stringa in ogni pagina e, ogni volta che vorrete modificare, o aggiornare il menù di navigazione del sito, non avrete che da modificare il contenuto del file.js.

Secondo metodo:

Prelevate, come prima, la porzione di codice che riguarda il menù. Riscrivetelo, preceduto dal tag "inclusione" e tutto su di una riga sola, come vedete sotto.
ATTENZIONE!  Come potete notare, il codice è racchiuso in nuove virgolette doppie, di conseguenza le virgolette interne diverranno singole. Attenti anche a non dimenticare il punto e virgola finale. Controllate tutti questi particolari, o il codice non funzionerà.
inclusione="<ul><li><a href='home.html'>Home</a></li><li><a href='pagina1.html'>Pagina 1</a></li><li><a href='pagina2.html'>Pagina 2</a></li><li><a href='pagina3.html'>Pagina 3</a></li></ul>";

Rinominate il file.txt e modificatene l'estensione così: menu.js

Ora, tornate al codice html della pagina su cui state lavorando. Sotto al tag <head>, incollate questa stringa, che serve a richiamare lo script:
<script src="menu.js"></script>

Al posto della parte di menù, che avevate copiato prima, invece, dovete incollare questa parte di codice:
<noscript>
<strong>
<p >Attenzione: per visualizzare correttamente questa pagina è necessario avere JavaScript attivato.</p>
</strong>
</noscript>
<script type="text/javascript">
document.write(inclusione);
</script>

..che fisserà lo script nel contenuto e visualizzerà un avviso nel caso in cui qualcuno avesse javascript disattivato nel proprio browser.

Alla fine, se avrete fatto tutto per benino, la parte iniziale del codice html della pagina, sarà simile a questo:
<html>
<head>
<link rel="stylesheet" type="text/css" href="layoutsito.css" />
<script src="menu.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<h1>Site name</h1>
</div>
<div id="navigation">
<noscript>
<strong>
<p >Attenzione: per visualizzare correttamente questa pagina è necessario avere JavaScript attivato.</p>
</strong>
</noscript>
<script type="text/javascript">
document.write(inclusione);
</script>

</div>

Le parti che ho segnato in rosso sono quelle nuove.

Perfetto, adesso potete fare la stessa procedura nelle altre pagine (basta un copia e incolla) e, ogni volta che vorrete effettuare modifiche al menù di navigazione, dovrete farle solo nel menu.js.

Terzo metodo:

Come prima, per prima cosa, preparate un semplice file html con il contenuto che volete includere, che può essere il menù, o qualunque altra cosa, anche semplice testo, purchè sia solo html e non contenga altri script, o funzioni. Potrà, invece, contenere uno style.
Ora, dovete scaricare questo file js, metterlo nella cartella del vostro sito e includerlo nel codice della vostra pagina, sezione head, cosí....

<script src="js/w3data.js"></script>

....naturalmente, il percorso del file, segnato in rosso, dovrà corrispondere al reale percorso nella vostra cartella.

Fatto questo, dovete richiamare lo script usando questo codice....

 <script>w3IncludeHTML();</script>

....che incollerete subito prima della chiusura del body (</body>).

Infine, dovete incollare questa stringa nel punto esatto in cui volete far apparire il contenuto incluso....

<div w3-include-html="menu.html"></div>

....indicando il percorso del file html da includere.

Possono essere inclusi più file html, ripetendo la stringa.

Fonte



Come includere contenuti usando jQuery:



Che cos'è jQuery?

Citazione: "jQuery è una libreria JavaScript che semplifica l’attraversamento dei documenti HTML, la gestione degli eventi, le animazioni e le interazioni AJAX per migliorare e velocizzare lo sviluppo web. La sua sintassi semplificata permette di approcciare a javascript con relativa semplicità e di realizzare interfacce user friendly in modo efficace." (Fonte)

Per inserire la libreria jQuery dovete andare sul sito di jQuery e avete due scelte:
  • Potete scaricare la versione corrente di jQuery da includere.
  • Potete prelevare il link di inclusione che viene offerto (comprensivo degli attributi di integrità e di origine).
    Es: <script  src="https://code.jquery.com/jquery-3.3.1.min.js"  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="  crossorigin="anonymous"></script>

NOTA: Non tutte le versioni di jQuery sono adatte alle differenti applicazioni, soprattutto quando si tratta di applicazioni datate. Il collegamento alla libreria jQuery può essere messo a fondo pagina, prima della chiusura di </body>, come pure gli script che da essa dipendono. In questo modo, la velocità di caricamento della pagina non ne risentirà.



Questo metodo è davvero di una semplicità estrema. Lo raccomando, soprattutto, nel caso in cui si voglia includere il menù di navigazione.
Mostro, quindi, l'esempio in questo senso, immaginando di voler includere la sezione "nav" nelle pagine del sito.
Preparate, nella root del sito, un file html, che chiamerete (per l'esempio) nav.html. In questo file, incollate tutta la sezione nav che contiene il menù, con i suoi tag di chiusura e apertura (<nav></nav>).
In fondo alle pagine in cui volete includere il menu, naturalmente, ci dovrà essere il collegamento alla libreria jQuery e dovrà essere posto prima (quindi al di sopra) dello script che ci serve, che è questo:
<script>
$(function(){
  $("#nav").load("nav.html");
});
</script>

Nel punto della pagina in cui dovrà apparire il menù (per es. nella sezione header), inserite questo richiamo:
<div id="nav"></div>

Ecco fatto, il menù di navigazione apparirà nel punto che avete stabilito e, quando dovrete aggiornarlo, non avrete che da aggiornare il file nav.html.
Naturalmente, potete usare questo metodo per includere qualunque contenuto di un file html esterno.
Potete, anche, includere più file, dando sempre un nome univoco al div.

Per esempio:

È possibile includere anche una parte specifica del file html esterno, in questo modo (utilizzo sempre l'esempio fatto per il menu, per non creare confusione):

$('#nav').load('nav.html #sezione');

Dove al posto di "sezione" mettete l'id del div specifico, situato nel file esterno, in cui avrete racchiuso la parte del contenuto che volete includere.

Esempio:

<div id="sezione">
contenuto da includere
</div>

Come includere il contenuto di un file txt:

Con jQuery e poche righe di javascript è possibile includere in un file html il testo di un file txt.

Preparate il file txt con il testo che desiderate far apparire nella vostra pagina e chiamatelo "comunicazioni.txt" (nel caso in esempio).
Lo script da utilizzare è questo:
<script>
  $('#text').load("comunicazioni.txt");
</script>

Mettetelo prima della chiusura del body (</body>).

Questo è il codice da mettere, invece, dove volete che il testo appaia:
<p id="text"></p>

Naturalmente, il titolo identificativo indicato nello script deve corrispondere all'id del paragrafo (p). In questo caso "text".

Con un po' di fantasia, potete personalizzare lo spazio dedicato per avere un risultato simile a questo: file-esterni Il codice per ottenerlo è il seguente:
<style>
.news {
max-width: 600px;
width:100%;
text-align: center;
margin:0 auto;
border: 2px solid #CCC;
background-color: #ffffe6;
}
.news h2 {
color: #e62e00;
}
</style>

<div class="news">
<h2>News</h2>
<p id="text"></p>
</div>

Non dimenticate il collegamento alla libreria jQuery





Fammi sapere se questo argomento ti è stato utile.
Se non ti è stato utile, potrai inviare le tue osservazioni. Grazie
Ti è stato utile questo argomento?
Si
No



Continua con....Come scrivere in html ->>

Elenco argomenti della guida:
Torna alla pagina principale:Creare un sito da zero ->>


E molto altro ancora se leggi:
Tutti gli argomenti