Ik heb een oplossing nodig voor auto-aanpassen van de breedte
en hoogte
van een iframe
zodat de inhoud nauwelijks past. Het punt is dat de breedte en hoogte kunnen worden gewijzigd nadat het iframe
is geladen. Ik denk dat ik een event action nodig heb om om te gaan met de verandering in afmetingen van de body in het iframe.
<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-browser, cross domain library die mutationObserver
gebruikt om iFrame sized te houden met de inhoud en postMessage
om te communiceren tussen iFrame en host pagina. Werkt met of zonder jQuery.
Hier is een cross-browser oplossing als je geen jQuery wilt gebruiken:
/**
* 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;
}