Integrarea unei pagini web în interiorul altei pagini poate fi realizată foarte uşor cu tag-ul iframe. Singura mică problemă pe care am remarcat-o este dimensionarea sa. Dacă lăţimea poate fi controlată uşor la cea a ecranului prin zoom (100%), a alege atributul height:100%;, nici chiar prin „amplificarea” acestuia (100%!important;) nu este de folos.
O modalitate elegantă este prin folosirea unui javascript, fie încorporat direct în tag, fie ca funcţie apelabilă.
Varianta încorporată
<iframe src="/test-pagina/" style="width:100%;border:none;" onload="this.style.height = this.contentWindow.document.documentElement.scrollHeight + 'px';"></iframe>
sau
<iframe style="width: 90%; height: 70vh; border: none; margin: 0 auto; display: block;" src="https://www.youtube.com/embed/CWzrABouyeE"></iframe>
Folosirea funcţiei. În secţiunea <head> se introduce funcţia de mai jos, apelabilă apoi în scriptul tag-ului iframe.
<script>
function fc_redimens_frame(obj) {
obj.style.width= 100 + '%';
obj.style.height = 0; // recalculare inaltime, altfel ar fi doar crestere
obj.style.height = obj.contentWindow.document.documentElement.scrollHeight+10 + 'px';
}
</script>
<body>
<iframe src="/test-pagina/" style="width:100%;border:none;" onload="fc_redimens_frame(this)"></iframe>
</body>
În cazul în care poziţionarea iframe-ului „joacă feste” (eventuală suprapunere peste alte blocuri de text/imagini) se poate plasa, atât înainte cât şi după, un div cu atributul clear:
<div style="display: block; clear: both;"></div>
Pentru puţină relaxare, o exemplificare plăcută, redată muzical de marele Louis Armstrong.
