Pubblicato il 09/05/15e aggiornato il

Come inserire un iframe in un post o in una pagina.

Codice per pubblicare un iframe che serve per richiamare una pagina web all'interno di un'altra pagina tramite il suo indirizzo.
L'iframe ovvero inline frame è un modo per richiamare una pagina web all'interno di un'altra pagina web attraverso il suo indirizzo. Insieme al tag <iframe> possono essere usati diversi attributi tra cui quelli della larghezza e dell'altezza. Molti di questi attributi sono stati però deprecati in HTML5.

Fino a qualche anno fa insieme al contenuto dell'iframe veniva inserito anche un testo da visualizzare in quei browser che non supportavano questo tag. Adesso si tratta di una pratica superflua visto che l'iframe è supportato da tutti i browser. L'iframe viene comunemente utilizzato per la condivisione dei video di Youtube. Quando andate su Condividi > Codice da incorporare non fate altro che copiare il codice di un iframe che oltre all'indirizzo del video mostrerà anche i dati delle dimensioni del player


Anche Facebook ha utilizzato e utilizza molto gli iframe per i suoi plugin. Il codice generico di un iframe potrebbe essere il seguente

<iframe src="Indirizzo_pagina_web" width="100%" height="300"></iframe>

in cui oltre all'indirizzo della pagina ho indicato solo larghezza in percentuale e altezza in pixel. Alternativamente può anche essere usato un codice come questo

<div align="center">
<iframe style="width:50%; height:300px;" src="Indirizzo_pagina_web"></iframe>
</div>

per centrare l'iframe nella pagina. Se al posto di Indirizzo_pagina_web incolliamo l'indirizzo del sito che abbiamo caricato su Google Drive secondo il procedimento appena visto si ottiene


Per inserire le barre di scorrimento o per escluderle si utilizza il tag scrolling="yes" o scrolling="no" e il risultato con il primo tag è il seguente

Si può creare una intera pagina web con un iframe. Se per esempio abbiamo creato un sito con Google Drive come abbiamo già visto, il suo indirizzo sarà lunghissimo. Volendo si può ripubblicare in una singola pagina di un nostro spazio. Facciamo due esempi.

PUBBLICARE UN IFRAME CON ALTERVISTA


Altervista è un servizio gratuito molto interessante con dei tool molto utili. Tra questi c'è la possibilità di creare e pubblicare delle pagine web. Si va su Pannello e si accede con il nostro account. Si clicca quindi su Gestione File e si va in basso su Nuovo File. Si digita un nome e si procede alla creazione del file

Si aprirà l'Editor con questo codice base


Per inserirvi per esempio l'iframe del menù che abbiamo caricato su Google Drive dobbiamo modificarlo in questo modo
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="generator" content="AlterVista - Editor HTML"/>
  <style>
    body { margin:0; padding:0; }
    iframe { position: absolute; height: 100%; width: 100%; }
  </style>
  <title>Google Drive Website</title> 
</head>
<body>
<iframe src="https://googledrive.com/host/0B5vupkCL4QrxfmtHWjJYcjNSSDkyYzZBMjJadFM5X2t0bUZWU1ozc2JSQ3hGb09Jcjhsa0k" frameborder="0">
</iframe>
</body>
</html>
quindi si va su Salva. L'iframe è stato pubblicato è può essere visualizzato in questa pagina

PUBBLICARE UN IFRAME IN UN DOMINIO


Se avete un dominio di vostra proprietà potete creare un nuovo file con estensione HTML all'interno del quale potete inserire questo codice

<html>
 <head>
  <style>
    body { margin:0; padding:0; }
    iframe { position: absolute; height: 100%; width: 100%; }
  </style>
  <title>Titolo della pagina</title>
 </head>   
 <body>
   <iframe src="URL_PAGINA_IFRAME" frameborder="0"></iframe>
 </body>
</html>

Dopo la pubblicazione potrete visuaslizzare la pagina all'indirizzo www.esempio.com/nomefile.html se www.esempio.com è l'indirizzo del vostro dominio e nomefile.html il nome del file.




Nessun commento :

Posta un commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.