Bir iframe
in genişlik
ve yükseklik
değerlerini içeriğe sığacak şekilde otomatik olarak ayarlamak için bir çözüme ihtiyacım var. Mesele şu ki, genişlik ve yükseklik iframe
yüklendikten sonra değiştirilebilir. Sanırım iframe içinde yer alan gövdenin boyutlarındaki değişiklikle başa çıkmak için bir olay eylemine ihtiyacım var.
<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>
Çapraz tarayıcı jQuery eklentisi.
iFrame'i içeriğe göre boyutlandırmak için mutationObserver
ve iFrame ile ana sayfa arasında iletişim kurmak için postMessage
kullanan çapraz yaylı, çapraz alan kütüphane. JQuery ile veya jQuery olmadan çalışır.
Eğer jQuery kullanmak istemiyorsanız işte size tarayıcılar arası bir çözüm:
/**
* 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;
}