Jeg trenger en løsning for automatisk justering av bredden
og høyden
på en iframe
slik at den så vidt passer til innholdet. Poenget er at bredden og høyden kan endres etter at iframe
er lastet inn. Jeg antar at jeg trenger en hendelseshandling for å håndtere endringen i dimensjonene til kroppen i iframen.
<script type="application/javascript">
function resizeIFrameToFitContent( iFrame ) {
iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}
window.addEventListener('DOMContentLoaded', function(e) {
var iFrame = document.getElementById( 'iFrame1' );
resizeIFrameToFitContent( iFrame );
// or, to resize all iframes:
var iframes = document.querySelectorAll("iframe");
for( var i = 0; i < iframes.length; i++) {
resizeIFrameToFitContent( iframes[i] );
}
} );
</script>
<iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>
Cross-browser jQuery plug-in.
Cross-bowser, cross domain library som bruker mutationObserver
for å holde iFrame tilpasset innholdet og postMessage
for å kommunisere mellom iFrame og vertsside. Fungerer med eller uten jQuery.
Her er en løsning på tvers av nettlesere hvis du ikke vil bruke jQuery:
/**
* Resizes the given iFrame width so it fits its content
* @param e The iframe to resize
*/
function resizeIframeWidth(e){
// Set width of iframe according to its content
if (e.Document && e.Document.body.scrollWidth) //ie5+ syntax
e.width = e.contentWindow.document.body.scrollWidth;
else if (e.contentDocument && e.contentDocument.body.scrollWidth) //ns6+ & opera syntax
e.width = e.contentDocument.body.scrollWidth + 35;
else (e.contentDocument && e.contentDocument.body.offsetWidth) //standards compliant syntax – ie8
e.width = e.contentDocument.body.offsetWidth + 35;
}