Barra laterale
programmazione:jquery:adattare_altezza_iframe_su_contenuto
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:
$(document).ready(function(){ $("#myFrame").on('load',function(){ var h = $(this).contents().find("body").height()+40; $(this).height(h); }); });
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
<!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>
programmazione/jquery/adattare_altezza_iframe_su_contenuto.txt · Ultima modifica: 04/04/2019 - 17:20 da Fabio Di Matteo
Strumenti Pagina
Ad eccezione da dove è diversamente indicato, il contenuto di questo wiki è soggetto alla seguente licenza: CC Attribution-Share Alike 4.0 International
