Pagina che si adatta al contenuto(codice iframe)

18-10-2014, 13.52.36

Ciao,
Solo per curiosità,questo codice è uno scriptino iframe ma non funziona,cioè funziona per la prima pagina e visualizza un bordo inutile,ma se clicco un link apre la pagina e non nell'iframe.

Codice:

<script language="javascript">
<!--
var altezza = (window.screen.height/100)*70;
document.write("<iframe src='pagina.html' width='400' height='" + altezza + "'>");
document.write("</iframe>");
//-->
</script>

Questo scriptino usa Javascript.
Come dimensione me ne mette una, che però non si adatta alla pagina contenuta ma rimane sempre uguale!!!!
Per curiosità ho usato un'altro iframe per ridimensionare l'iframe a seconda della dimensione della pagina contenuta.

Codice:

<script language="Javascript"><!--function calcHeight()
{ //find the height of the internal page var the_height=  document.getElementById('the_iframe').contentwindow.   
document.body.scrollHeight; //change the height of the iframe document.getElementById('the_iframe').height=  
 the_height;}//--></script>

E nel tag dell'iframe aggiungo gli attributi:

Codice:

scrolling="NO" onload="calcHeight();" id="the_iframe"

Questo scriptino adatta automaticamente la dimensione del iframe alla pagina.Non è inserito all'interno di altri frame,ma sostituito all'iframe classico del sito.Per curiosità,mi serve non uno script che faccia adattare la dimensione dell'iframe alla risoluzione della pagina del sito,ma uno script che faccia adattare le dimensioni alla pagina contenuta.Esempio:

Codice:

<iframe src="pagina.htm" width="500" height="altezza di pagina.htm ">

forse ora mi sono spiegato meglio,ma va bene lo stesso l'iframe classico del sito.Ciao

**NLSweb** · 19-10-2014, 16.39.33

il problema sta nel fatto che quando esegui il codice JS per creare iframe , gli chiedi di definire la sua altezza in base alla dimensione della finestra ... ma il documento all'interno del iframe non e' stato ancora caricato quando gli chiedi di "misurare" la finestra ... quindi non ti da una corretta risposta.

se vuoi continuare ad usare iframe , dopo che hai caricato il documento esegui un secondo script che ne legge altezza e modifica la dimensione della finestra.

19-10-2014, 17.34.55

Ciao,
Per curiosità,questo è un'altro scriptino,dovrebbe dimensionare un iframe in base alla dimensione della pagina in esso contenuta.

Codice:

< script language="javascript" >
< / script >
< iframe width="500" id="pagina.htm" onLoad="altezzaPagina();" src="pagina.html" scrolling="NO" frameborder="0" height="1">< / iframe>

forse,ma dopo che ha caricato il documento,come esegue un secondo script che ne legge la dimensione e modifica la dimensione della pagina contenuta?ciao

21-10-2014, 14.24.00

Ciao,
per curiosità,questo è un'altro scriptino,forse ridimensiona l'iframe in base alla pagina contenuta.

Codice:

    <script type="text/javascript">         function calcHeight()
         {
         //find the height of the internal page
         var the_height=
         document.getElementById('the_iframe').contentWindow.
         document.body.scrollHeight;


         //change the height of the iframe
         document.getElementById('the_iframe').height=
         the_height;
         }
</script>
    <iframe src="pagina.htm" name="pagina.htm" width="100%" 
    scrolling="no" id="the_iframe" onLoad="calcHeight();" height="" frameborder="0" ></iframe>
    </script>

Attendo risposta.Ciao

**NLSweb** · 23-10-2014, 11.03.26

Al caricamento del documento leggi l'altezza del contenuto del iframe , quindi assegni all'iframe l'altezza relativa

Codice HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<script>
window.onload=function(){
var iframe=document.getElementById('mioIFRAME');
 if(iframe){
    var altezza = iframe.contentWindow.document.body.scrollHeight;
    iframe.height = altezza+"px";
 }
}
</script>
</head>
<body>

<iframe id="mioIFRAME" src="tabcolalt.html" ></iframe>

</body>
</html>

DEMO

23-10-2014, 13.44.18

Ciao,

Originalmente inviato da NLSweb

Al caricamento del documento leggi l'altezza del contenuto del iframe , quindi assegni all'iframe l'altezza relativa

Puoi spiegarti meglio?grazie per l'esempio dello script.Ciao

**NLSweb** · 23-10-2014, 13.58.10

il contenuto del IFRAME vie caricato al caricamento del DOCUMENT

quindi crei uno script che associa all'evento window.onload una funzione:

carica l'elemento IFRAME in una variabile

quindi crei un IF che controlla se quella variabile e' TRUE (quindi l'elemento esiste)

quindi crei una variabile a cui assegni il valore dell'altezza del IFRAME

iframeObject.contentWindow -> ritorna la Window object generata dall'elemento iframe

quindi dall'oggetto selezionato preleviamo il valore

Object.document.body.scrollHeight -> ritorna l'intera altezza dell'elemento

quindi una volta determinata la dimensione dell'altezza del contenuto del iframe...
non mi rimane che definire l'altezza dell'iframe stesso con quella dimensione

iframeObject.height = altezza+"px";

aggiungo alla variabile altezza l'estesione PX perche' il valore ritornato e' solo numerico , ma per definire il parametro bisogna aggiungere anche la tipologia

23-10-2014, 14.26.41

Ciao,
grazie per il post,apparte gli errori di ortografia.Nell'esempio dello script,prima deve leggere il documento,poi ridimensiona l'iframe in base alla pagina contenuta.Domanda,iframeObject.contentWindow,objec t.document.body.scrollHeight,dove vanno messi nello script?ciao

**NLSweb** · 23-10-2014, 14.54.46

Scusa gli errori di ortografia sono dovuti ad una "battitura" veloce sulla tastiera...

Analizziamo lo script:

funzione eseguita al caricamento della finestra del browser (lato client)

Codice:

window.onload=function(){

}

assegnazione dell'elemento IFRAME (specificato da un ID) ad una variabile

Codice:

var iframe=document.getElementById('mioIFRAME');

verifica che la variabile sia VERO , quindi che l'elemeto esista

Codice:

if(iframe){

}

usiamo la variabile che definisce l'elemento iframe e ne deriviamo l'oggetto del suo contenuto
iframeObject.contentWindow
al contempo di questo oggetto leggiamo il valore dell'altezza del documento
Object.document.body.scrollHeight
quindi il valore viene assegnato ad una variabile

Codice:

    var altezza = iframe.contentWindow.document.body.scrollHeight;

usiamo la variabile che definisce l'elemento iframe e ne definiamo l'altezza , usando come valore il dato ricavato precedentemente ovvero l'altezza del documento contenuto nel iframe.

Codice:

    iframe.height = altezza+"px";

25-10-2014, 14.56.46

Ciao,
grazie per il post.Ciao

25-10-2014, 21.42.52

Ciao,
domanda,perche non visualizzi il bordo dell'iframe che codice bisogna mettere nello script?esempio:

Codice:

frameborder="px"

Attendo risposta.Ciao

**NLSweb** · 26-10-2014, 14.51.42

frameborder non e' supportato da HTML5 , quindi non lo uso....

usa i CSS3 , il comando border

26-10-2014, 23.10.29

Ciao,
grazie per la risposta.

Originalmente inviato da NLSweb

frameborder non e' supportato da HTML5 , quindi non lo uso....
usa i CSS3 , il comando border

Domanda,dove devo mettere il codice nello script?

Codice:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<script>
window.onload=function(){
var iframe=document.getElementById('mioIFRAME');
 if(iframe){
    var altezza = iframe.contentWindow.document.body.scrollHeight;
    iframe.height = altezza+"px";
 }
}
</script>
</head>
<body>

<iframe id="mioIFRAME" src="tabcolalt.html" ></iframe>

</body>
</html>

Attendo risposta.Ciao

**NLSweb** · 27-10-2014, 23.05.34

Puoi anche definirlo con lo script ... ma perche' ?
usa semplicemente CSS

esempio (bordo iframe 2px di spessore di colore rosso):

Codice:

<style>
#mioIFRAME{
 border:2px solid red;
}
</style>

28-10-2014, 12.29.38

Ciao,
grazie per la risposta.Domanda,puoi scrivere tutto lo script correttamente come deve essere messo nella pagina?per esempio non funziona il codice bordo frame.Anche questi due codici non funzionano,iframeObject.contentWindow,Object.docum ent.body.scrollHeight.Forse non sono messi correttamente nello script.Ciao

**NLSweb** · 28-10-2014, 21.45.13

Ti trascrivo il codice per intero e di pubblico un esempio DEMO
..ma ti consiglio vivamente di studiare bene il codice prima di usarlo e di non fare solo un copia ed incolla..

Codice HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<script>
window.onload=function(){

/* codice per dimensionare l'atezza del primo IFRAME */
var iframe=document.getElementById('mioIFRAME');
if(iframe){
    var altezza = iframe.contentWindow.document.body.scrollHeight;
    iframe.height = altezza+"px";
}

/* codice per dimensionare l'atezza del secondo IFRAME */
var iframe2=document.getElementById('mioIFRAME2');
if(iframe2){
    var altezza2 = iframe2.contentWindow.document.body.scrollHeight;
    iframe2.height = altezza2+"px";
}

}
</script>
<style>
/* codice CSS per IFRAME con Bordo Rosso */
#mioIFRAME{
 border:5px solid red;
}

/* codice CSS per IFRAME SEZA Bordo */
#mioIFRAME2{
 border:0px hidden;
}
</style>
</head>
<body>
<!-- IFRAME CON BORDO ROSSO -->
<iframe id="mioIFRAME" src="tabcolalt.html" ></iframe>

<!-- IFRAME SENZA BORDO -->
<iframe id="mioIFRAME2" src="tabcolalt.html" ></iframe>
</body>
</html>

28-10-2014, 22.21.33

Ciao,
grazie per il post,ecco dove andavano i codici,non erano messi correttamente nello script,c'era solo la pagina e il bordo cliccando il link e l'iframe non si adattava al contenuto.Ciao

29-10-2014, 21.41.02

Ciao,
nello script c'è qualche errore,lo script si adatta al contenuto ma non in larghezza,lo script visualizza come prima pagina la home del sito,forse ho messo il codice in modo non corretto,cioè il main e l'home.htm,il bordo frame non si cancella,almeno adesso visualizza il contenuto della pagina cliccando il link ma il bordo proprio non si cancella e ho provato vari esempi con questo script,per esempio nell'ultimo codice,cioè del primo iframe senza bordo il codice lo scritto in questo modo,

Codice:

/* codice CSS per IFRAME SEZA Bordo */
#mioIFRAME2{
 border:0px hidden;
}
<!-- IFRAME SENZA BORDO -->
<iframe id="main" src="home.htm"height="px"weight="px" ></iframe>
Inoltre nel codice var altezza = iframe.contentWindow.document.body.scrollHeight;
    iframe.height = altezza+"px"; ho messo i px giusti per la pagina

Nel codice weight mettendo i px giusti l'iframe si adatta alla pagina in larghezza,visto che non funzionano px più px del codice di prima,ma il contenuto del sito si cancella.Attendo risposta.Ciao

**NLSweb** · 29-10-2014, 23.17.21

Come ti dicevo .. e' bene che tu comprenda bene il funzionamento del codice prima di utilizzarlo..

nel CSS definiamo l'aspetto grafico del IFRAME e per farlo dobbiamo "puntare" ad esso
quindi quando scrivo #mioIFRAME e' una sintassi che punta ad un IFRAME che ha come ID = "mioIFRAME"
nel caso del codice da te riportato il tuo IFRAME ha come ID = main , quindi il codice CSS deve "puntare" a #main

nello script c'è qualche errore,lo script si adatta al contenuto ma non in larghezza

basta aggiungere usando la stessa logica anche WIDTH

cosi come

Object.document.body.scrollHeight -> ritorna l'intera altezza dell'elemento

cosi

Object.document.body.scrollWidth-> ritorna l'intera larghezza dell'elemento

quindi usi iframeObject.width per definirne la larghezza.

non comprendo bene il resto del tuo post...

30-10-2014, 15.36.33

Ciao,
grazie per il post,il contenuto del sito si cancellava perché mettevo il codice non corretto nello script.

Codice:

<iframe id="main"src="home.htm"height="px"wight="px"></iframe>,invece di <iframe id="main" src="home.htm"></iframe>

Lo script funziona ma non ridimensiona in automatico l'frame in base alla pagina contenuta e le barre di scorrimento della pagina non si cancellano.

Codice:

<script>
window.onload=function(){

/* codice per dimensionare l'atezza del secondo IFRAME */
var iframe2=document.getElementById('main');
if(iframe2){
    var altezza2 = iframe2.contentWindow.document.body.scrollHeight;
    iframe2.height = 800+"px";}
	/* codice per dimensionare la larghezza del secondo IFRAME */
var iframe2=document.getElementById('main');
if(iframe2){
    var larghezza2 = iframe2.contentWindow.document.body.scrollwidth;
    iframe2.width = 800+"px";}
}
</script>
<style>
/* codice CSS per IFRAME SEZA Bordo */
#main{
 border:0px hidden;
}
</style>
<!-- IFRAME SENZA BORDO -->
<iframe id="main" src="home.htm" ></iframe>

Attendo risposta.Ciao

**NLSweb** · 30-10-2014, 23.53.19

Per HTML5 poi definire con i CSS i seguenti parametri:

Codice:

#mioIFRAME{
 border:0px hidden;
 overflow:hidden;
}

oltre che usare la funzione JS per definirne l'atezza e la larghezza.

per le vecchie versioni di HTML puoi usare questi attributi nel TAG IFRAME

Codice:

<iframe id="mioIFRAME" src="pagina.html" scrolling="no" frameborder="0"></iframe>

ecco un DEMO

31-10-2014, 18.27.17

Ciao,grazie per il post,lo script funziona ma la pagina non si adatta alla finestra dell'iframe.Come prima pagina lo script visualizza l'home.htm del sito,come impostare una prima pagina nello script?se metto un'altra pagina al posto dell'home.htm,lo script non si visualizza più correttamente.

Codice:

<script>window.onload=function(){
/* codice per dimensionare l'atezza del secondo IFRAME */
var iframe2=document.getElementById('main');
if(iframe2){
    var altezza2 = iframe2.contentWindow.document.body.scrollHeight;
    iframe2.height = 800+"px";}
    /* codice per dimensionare la larghezza del secondo IFRAME */
var iframe2=document.getElementById('main');
if(iframe2){
    var larghezza2 = iframe2.contentWindow.document.body.scrollwidth;
    iframe2.width = 800+"px";}
}
</script>
<style>
/* codice CSS per IFRAME SEZA Bordo */
#main{
 border:0px hidden;
  overflow:hidden;
}
</style>
<!-- IFRAME SENZA BORDO -->
<iframe id="main" src="home.htm" scrolling="no"align= "" marginwidth = "0" marginheight ="0"></iframe>

Attendo risposta.Ciao

**NLSweb** · 01-11-2014, 14.42.33

perche' definisci la dimensione della finestra in modo statico (cioe' assegnandogli tu i valori .. nel tuo post 800px)
a che ti serve la funzione JS che legge la dimensione del iframe se poi non la usi ?

invece di 800 , dovresti usare le variabili : altezza2 , larghezza2

..lo script funziona ma la pagina non si adatta alla finestra dell'iframe...

Cosa intendi fare ? Vuoi che la finestra del iframe sia a tutto schermo ? o che la finestra del browser si dimensioni alla dimensione del iframe ?

non e' chiaro cosa vuoi ottenere.

01-11-2014, 16.22.30

Ciao,
nello script classico del sito la pagina contenuta si adattava in larghezza alla finestra dell'iframe,se in questo script iframe metto solo le due variabili lo script non legge le dimensioni della seconda variabile contenuta.Per la domanda di prima,lo script visualizza come prima pagina l'home.htm,
visualizzando il sito all'interno della finestra,se metto un'altra prima pagina al posto dell'home.htm,lo script non si visualizza più correttamente.
Questo è lo script iframe classico del sito.

Codice:

<iframe src="home.htm" name="main" width="648"  height="475"  scrolling="auto" frameborder="0"
 style="filter: chroma(color=#000000)" allowtransparency="true"></iframe>

Attendo risposta.Ciao

02-11-2014, 13.54.11

Ciao,
nello script iframe la seconda variabile non viene letta e non ridimensiona la pagina contenuta in larghezza.Per la domanda della prima pagina home.htm,lo script visualizza il sito all'interno della finestra,se metto un'altra prima pagina al posto dell'home.htm,lo script non si visualizza più correttamente,come mettere una prima pagina?

Codice:

<script>window.onload=function(){
/* codice per dimensionare l'atezza del secondo IFRAME */
var iframe2=document.getElementById('main');
if(iframe2){
    var altezza2 = iframe2.contentWindow.document.body.scrollHeight;
    iframe2.height = altezzza2+"px";}
    /* codice per dimensionare la larghezza del secondo IFRAME */
var iframe2=document.getElementById('main');
if(iframe2){
    var larghezza2 = iframe2.contentWindow.document.body.scrollwidth;
    iframe2.width = larghezza2+"px";}
}
</script>
<style>
/* codice CSS per IFRAME SEZA Bordo */
#main{
 border:0px hidden;
  overflow:hidden;
}
</style>
<!-- IFRAME SENZA BORDO -->
<iframe id="main" src="home.htm" scrolling="no"align= "" marginwidth = "0" marginheight ="0"></iframe>

Attendo risposta.Ciao

**NLSweb** · 02-11-2014, 17.32.01

Il problema non e' nel codice in se... ma nella logica della struttura HTML

un Iframe , puo' contenere al suo interno altri Iframe o avere dei contenuti dinamici che ne variano la dimensione ;
nel momento che un Iframe e viene caricato (load) non e' detto che tutto il contenuto venga caricato allo stesso tempo.

Inoltre non e' possibile leggerne lo stile (altezza e larghezza) se non sono nello stesso dominio della pagina che li richiama.

Se i contenuti dinamici che vuoi caricare nel iframe , provengono tutti dal tuo dominio , ti consiglio di utilizzare un sistema piu' efficiente:

invece del iframe , crea un semplice DIV a cui assegni un ID , quindi usa jQuery AJAX Load per caricare al suo interno il file che desideri.
nel file esterno poi definisci un CSS con ID del DIV di cui sopra , in cui definisci l'altezza e la larghezza che la pagina deve avere.

In questo modo avrai sempre l'esatte dimensione del DIV in base al contenuto.

DEMO

Codice della pagina principale

Codice HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  aggiorna("paginaHTML1.html");
});
function aggiorna(sito){
 $("#contenitore").load(sito);
}
</script>
<style>
#contenitore{
 overflow:hidden;
}
</style>
</head>
<body>
<button onclick="aggiorna('paginaHTML2.html')">Cambia il contenuto del IFRAME</button><br>
<div id="contenitore"></div>
</body>
</html>

Codice della pagina da caricare

Codice HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
   #contenitore{
    width:500px;height:400px;
    background:red;
    color:white;
   }
  </style>
</head>
<body>
ESEMPIO di Pagina HTML 1
</body>
</html>

02-11-2014, 23.34.46

Ciao,
nel post,lo script legge la pagina contenuta al click nel bottone,che centra il bottone?voglio che la pagina si visualizzi per intero nello script cliccando il link.Per quanto riguarda lo script di prima,con vari esempi lo script legge anche la larghezza impostata della pagina contenuta,ma in anteprima con il browser lo script neanche si visualizza correttamente,mentre se legge le due variabili lo script non legge le dimensioni della seconda variabile contenuta.Lo script visualizza il sito all'interno della finestra,se metto un'altra prima pagina al posto dell'home.htm,lo script non si visualizza più correttamente.Ciao

**NLSweb** · 03-11-2014, 12.36.06

il bottone l'ho inserito come esempio per modificare il contenuto del DIV ; in pratica al caricamento del documento nel DIV viene caricato un file esterno , ed al click del bottone ne viene caricato un altro.
Ad ogni caricamento il DIV assume le dimensioni del documento caricato , poiche' e' il documento stesso a passargli queste informazioni di stile CSS.

in merito allo script precedente , bisognerebbe fare un Debug del codice per capire dove sia il problema che riscontri ;
se puoi / vuoi posta un link di esempio .

se metto un'altra prima pagina al posto dell'home.htm,lo script non si visualizza più correttamente

dipende da cosa carichi.. ; la logica vuole che se lo script funziona per una pagina , funzioni anche per un altra .
pero' come ti scrivervo nel post precedente , iFrame ha delle limitazioni ; quindi il funzionamento dello script e' subordinato al rispetto di certi limiti.

03-11-2014, 22.30.33

Ciao,
questo è un'altro scriptino iframe,lo script si basa su un metodo jQuery per trovare la dimensione della finestra corrente,dimensiona perfettamente la larghezza dello script inbase alla finestra del sito tra i due menu laterali,anche se si mette un'altra pagina al posto di home.htm,il bordo si cancella,poi per gestire il ridimensionamento della pagina,il tag body ha un gestore onResize che definisce la dimensione dell'iframe per ogni documento che viene ridimensionato,però se il testo della pagina contenuta e oltre la finestra del sito,non visualizza tutta la pagina.In progettazione pagina,non si visualizza lo script ne i menu,ma in anteprima si visualizza tutto perfettamente.Come dimensionare la finestra,perché si veda tutta la pagina?

Codice:

 <html><head>
     <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body onresize="$('#main').attr('height', $(window).height());" style="margin:0;" >
    <iframe id="main" src="home.htm" style="width:100%;" hight="100%;" onload="this.height=$(window).height();"frameborder="0"></iframe>
</body>
</html>

Attendo risposta.Ciao

04-11-2014, 21.12.21

Ciao,
Questo è lo scriptino.

Codice:

 <html><head>     
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body onresize="$('#main').attr('height', $(window).height());" style="margin:0;" >
<iframe id="main" src="home.htm" style="width:100%;" hight="100%;" onload="this.height=$(window).height();"frameborder="0"></iframe> 
</body>
</html>

Attendo risposta.Ciao

Discussione: Pagina che si adatta al contenuto(codice iframe)

LinkBack

Strumenti discussione

Display

Pagina che si adatta al contenuto(codice iframe)

Regole di scrittura