..::Freemedialab::..

«Un buon posto per approfondire in piena libertà e condivisione la propria passione verso l'informatica.»

Questa pagina è in sola lettura. Puoi visualizzare il sorgente, ma non puoi modificarlo. Contatta l'amministratore se pensi che ci sia un errore.

====== Adattare l'altezza di un Iframe in base all'altezza del suo contenuto con Jquery ======
Autore: **//Fabio Di Matteo//** \\ Ultima revisione:  **//  04/04/2019  - 17:14   //**  // //

Usando jquery si puo' facilmente adattare l'altezza di un iframe in base alla "lunghezza" del suo contenuto. Il codice che si occupa di tutto è il seguente:

<code javascript>
$(document).ready(function(){
		$("#myFrame").on('load',function(){
		  var h = $(this).contents().find("body").height()+40;
		  $(this).height(h);
		});
});
</code>
Ogni volta che si carica il contenuto di un iframe l'altezza dello stesso viene adattata di conseguenza.
===== Il codice completo della pagina di esempio =====
<code javascript>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Iframe autoresize</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script>
	
	
	$(document).ready(function(){
		$('#myButton').click(function(){
				$('#myFrame').attr('src','iframe_content2.html');
			});
		
		$("#myFrame").on('load',function(){
		  var h = $(this).contents().find("body").height()+40;
		  $(this).height(h);
		});
	});//ready
	
	</script>
</head>

<body>
	<div style="border:1px Solid Red;padding: 5px">This div is inside main page (index.html)
	<button id="myButton">Change iframe src</button>
	</div>
	<iframe id="myFrame" src="iframe_content.html" style="border:1px Solid Gray; width:100%" ></iframe>
	<div style="border:1px Solid Red;padding: 5px">end of main page</div>
</body>

</html>

</code>

..::Freemedialab::.. «Un buon posto per approfondire in piena libertà e condivisione la propria passione verso l'informatica.»

..::Freemedialab::..

Strumenti Utente

Strumenti Sito

Strumenti Pagina

..::Freemedialab::..

«Un buon posto per approfondire in piena libertà e condivisione la propria passione verso l'informatica.»