Includere un file esterno usando javascript

di Maria Silvana Radice







Questa pagina e` una continuazione della guida Come creare un sito da zero, passo a passo..

Premessa:
Qualunque codice javascript puo` essere inserito direttamente nella sezione "head" del codice html di una pagina, racchiudendolo tra questi tag:

<script type="text/javascript">
codice
</script>

Il metodo migliore, pero` e normalmente utilizzato e` quello di includerlo da un file esterno


Come includere i contenuti, tramite un file esterno, usando javascript..
How to include contents, with an external file, using javascript



L'inclusione tramite file esterno e` anche utile per poter modificare alcune parti del sito su tutte le pagine contemporaneamente.

Puo` essere comodo, per esempio, in un sito con tante pagine, inserire il menu` 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.

Ci sono tre metodi....

Primo metodo:

Prendendo come esempio una pagina del sito che avete costruito, copiate dal suo codice HTML la parte del menù che ci 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:

document.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 (public_html).
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 type="text/javascript" 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.
Tenete presente che un menù incluso potrà essere visto solo aprendo la pagina nel browser, tramite il suo indirizzo di pubblicazione.
Esempio:  http://nomesito.host2c.com/nomepagina.html
Non potrete visualizzarlo con "HTML edit" e nemmeno con Kompozer.

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 type="text/javascript" src="menu.js"></script>

Al posto della parte di menù, che avevate copiato prima, invece, dovete incollare questa parte di codice:

<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>

..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 type="text/javascript" src="menu.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<h1>
            Site name</h1></div>
<div id="navigation">
   <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>

        </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. Tenete presente che il menù, così richiamato, sarà visibile solo tramite il browser e non verrà visualizzato utilizzando "HTML edit" e nemmeno con i programmi come Kompozer.
Dovete sapere, anche, che le inclusioni con javascript potrebbero non essere lette dai motori di ricerca. Cerchiamo di capire qualcosa di più a riguardo..

Terzo metodo:

Usare javascript e jQuery per includere un file html in una pagina html.
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 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 jQuery, metterlo nella cartella del vostro sito e includerlo nel codice della vostra pagina, sezione head, così....

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

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

Sempre nella sezione head, dovete mettere questa funzione:

   <script>
    $(function(){    $("#includedContent1").load("file.html");
    });
    </script>


"includeContent1" è il riferimento al div che racchiuderà il contenuto del file esterno. Potete dargli il nome che volete, purchè sia, ovviamente, lo stesso nome del div. Potete, anche, includere altri file ripetendo la stringa e dando sempre un nome univoco.
Per esempio:

#includedContent1
#includedContent2
#includedContent3

"file.html" è il nome + percorso del file esterno html che volete includere.

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

<div id="includedContent1"></div>

Tenete presente che lo script funzionerà solo se il file da includere si trova nello stesso dominio della pagina in cui va incluso.

Quarto 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 (anche il allegato a fondo pagina), 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.

Precisazioni sulle inclusioni con javascript..

Le inclusioni, cioè file esterni che vengono richiamati nella pagina, possono essere lato client e lato server. Come funzionano?
Un file con inclusioni lato client viene inviato così com'è al sistema dell'utente, che lo elabora e ne estrae i contenuti. Questo succede, ad esempio, con un file.js in una pagina html, come visto sopra.
Invece, un file con inclusioni lato server (come un file .html in una pagina php, per esempio), viene prima letto e interpretato dal server e poi inviato al sistema. Quindi, il sistema riceve il codice html per esteso. Facciamo un esempio..
Visualizzando il codice sorgente di una pagina html con incluso un file.js, vedreste la stringa di inclusione ancora intatta, così:

<script type="text/javascript" src="menu.js"></script>

Invece, visualizzando il codice sorgente di una pagina php con incluso un file .html, vedreste il menù aperto, così:

<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>

Per questo motivo, una inclusione di questo tipo viene perfettamente interpretata dai motori di ricerca.
Se il contenuto che includiamo ci interessa solo visualmente, va benissimo l'inclusione con javascript, ma se vogliamo, invece che sia indicizzato, allora dobbiamo inserirlo per esteso, o ricorrere ad altri sistemi. Una soluzione puo` essere.. Usare php.
Continuate con la parte successiva....






ċ
w3data.js
(6k)
Maria Silvana Radice,
03 gen 2017, 02:25