İframe'in genişliğini ve yüksekliğini içindeki içeriğe uyacak şekilde ayarlayın

Ben bir çözüm gerek otomatik ayarlamawidth ve heightbir bir iframezorlukla içeriğini uyacak şekilde. Nokta genişlik ve yüksekliğin iframeyüklendikten sonra değiştirilebilmesidir . Sanırım iframe'de bulunan bedenin boyutlarındaki değişimle 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 .

Çapraz bowser Alanları arası kütüphane kullanımları olduğunu mutationObserveriFrame içeriğe büyüklükte tutmak ve postMessageiFrame ve ana sayfası arasında iletişim kurmak için. JQuery ile veya jQuery olmadan çalışır.

Şimdiye kadar verilen tüm çözümler yalnızca bir kerelik yeniden boyutlandırmayı oluşturmaktadır. İçerikler değiştirildikten sonra iFrame'i yeniden boyutlandırmak istediğinizi belirttiniz. Bunu yapmak için iFrame içinde bir işlev yürütmeniz gerekir (içerik değiştirildikten sonra, içeriğin değiştiğini söylemek için bir olay başlatmanız gerekir).

İFrame içindeki kod iFrame içindeki DOM ile sınırlı görünüyordu (ve iFrame'i düzenleyemedi) ve iFrame dışında yürütülen kod iFrame dışındaki DOM ile sıkışmış gibi (ve yapamadım) t iFrame'in içinden gelen bir etkinliği seçer).

Çözüm, (bir iş arkadaşından yardım alarak) jQuery'nin hangi DOM'un kullanacağı söylenebileceğini keşfetmekten geldi. Bu durumda, üst pencerenin DOM'u.

Bu nedenle, böyle bir kod ihtiyacınız olanı yapar (iFrame içinde çalıştırıldığında):

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#IDofControlFiringResizeEvent").click(function () {
            var frame = $('#IDofiframeInMainWindow', window.parent.document);
            var height = jQuery("#IDofContainerInsideiFrame").height();
            frame.height(height + 15);
        });
    });
</script>

Gömme için tek astarlı çözüm: minimum boyutla başlar ve içerik boyutuna artar. komut dosyası etiketlerine gerek yoktur.

<iframe src="http://URL_HERE.html" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:200px;width:100%;border:none;overflow:hidden;"></iframe>

İframe içeriği aynı alan adından geliyorsa, bu harika çalışmalıdır. Gerçi jQuery gerektirir.

$('#iframe_id').load(function () {
    $(this).height($(this).contents().height());
    $(this).width($(this).contents().width());
});

Dinamik olarak yeniden boyutlandırmasını sağlamak için şunları yapabilirsiniz:

<script language="javaScript">
<!--
function autoResize(){
    $('#themeframe').height($('#themeframe').contents().height());
}
//-->
</script>
<iframe id="themeframe" onLoad="autoResize();" marginheight="0" frameborder="0" src="URL"></iframe>

Sonra iframe'in yüklediği sayfada şunu ekleyin:

<script language="javaScript">
function resize()
{
    window.parent.autoResize();
}

$(window).on('resize', resize);
</script>

JQuery kullanmak istemiyorsanız çapraz tarayıcı çö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;
}

Dünyadaki her şeyi denedikten sonra, bu gerçekten benim için çalışıyor.

index.html

<style type="text/css">
html, body{
  width:100%;
  height:100%;
  overflow:hidden;
  margin:0px;   
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
    $(iframe).height($(iframe).contents().find('html').height());
}
</script>

<iframe src="http://iframe.domain.com" width="100%" height="100%" marginheight="0" frameborder="0" border="0" scrolling="auto" onload="autoResize(this);"></iframe>

Bu kodu, sayfa yüklendiğinde tüm iframe'lerin (sınıf autoHeight ile) yüksekliğini otomatik olarak ayarlamak için kullanıyorum. Test edildi ve IE, FF, Chrome, Safari ve Opera'da çalışıyor.

function doIframe() {
    var $iframes = $("iframe.autoHeight"); 
    $iframes.each(function() {
        var iframe = this;
        $(iframe).load(function() {
            setHeight(iframe);
        });
    });
}

function setHeight(e) {
  e.height = e.contentWindow.document.body.scrollHeight + 35;
}

$(window).load(function() {
    doIframe();
});

Bu sağlam bir çözümdür

function resizer(id)
{

var doc=document.getElementById(id).contentWindow.document;
var body_ = doc.body, html_ = doc.documentElement;

var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight );
var width  = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );

document.getElementById(id).style.height=height;
document.getElementById(id).style.width=width;

}

html

<IFRAME SRC="blah.php" id="iframe1"  onLoad="resizer('iframe1');"></iframe>

Garnaph'ın yukarıdaki harika çözümünü biraz değiştirdim. Çözümü, olaydan hemen önceki boyuta göre iframe boyutunu değiştirmiş gibi görünüyordu. Durumum için (iframe üzerinden e-posta gönderimi) Gönderdikten hemen sonra iframe yüksekliğine ihtiyacım vardı. Örneğin, gönderimden sonra doğrulama hatalarını göster veya "teşekkür ederim" mesajı.

Ben sadece iç içe click () işlevini elimine ve benim iframe html koymak:

<script type="text/javascript">
    jQuery(document).ready(function () {
        var frame = $('#IDofiframeInMainWindow', window.parent.document);
        var height = jQuery("#IDofContainerInsideiFrame").height();
        frame.height(height + 15);
    });
</script>

Benim için çalıştı, ancak çapraz tarayıcı işlevselliğinden emin değilim.

Hem IFRAME içeriğini hem de üst pencereyi kontrol edebiliyorsanız iFrame Resizer'a ihtiyacınız vardır .

Bu kütüphane, aynı ve çapraz etki alanı iFrame'lerinin yüksekliğinin ve genişliğinin içerdikleri içeriğe uyacak şekilde otomatik olarak yeniden boyutlandırılmasını sağlar. İFrames kullanımıyla ilgili en yaygın sorunları ele almak için bir dizi özellik sunar, bunlar şunları içerir:

• İFrame'in içerik boyutuna göre yüksekliği ve genişliği yeniden boyutlandırma.
• Birden çok ve iç içe iFrame'lerle çalışır.
• Web alanları arası iFrame'ler için alan adı kimlik doğrulaması.
• Karmaşık CSS mizanpajlarını desteklemek için bir dizi sayfa boyutu hesaplama yöntemi sağlar.
• DOM'da, MutationObserver kullanılarak sayfanın yeniden boyutlandırılmasına neden olabilecek değişiklikleri algılar.
• Sayfanın yeniden boyutlandırılmasına neden olabilecek olayları algılar (Pencere Yeniden Boyutlandır, CSS Animasyonu ve Geçişi, Yön Değişikliği ve Fare olayları).
• PostMessage ile iFrame ve ana sayfa arasında basitleştirilmiş mesajlaşma.
• İFrame'deki sayfa bağlantılarındaki düzeltmeler ve iFrame ile üst sayfa arasındaki bağlantıları destekler.
• Özel boyutlandırma ve kaydırma yöntemleri sunar.
• Üst konumu ve görünüm alanı boyutunu iFrame'e gösterir.
• PDF ve ODF belgelerini desteklemek için ViewerJS ile birlikte çalışır.
• IE8'e geri dönüş desteği.

tüm yukarıdaki yöntemleri kullanarak çalışamaz.

javascript:

function resizer(id) {
        var doc = document.getElementById(id).contentWindow.document;
        var body_ = doc.body, html_ = doc.documentElement;

        var height = Math.max(body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight);
        var width = Math.max(body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth);

        document.getElementById(id).style.height = height;
        document.getElementById(id).style.width = width;

    }

html:

<div style="background-color:#b6ff00;min-height:768px;line-height:inherit;height:inherit;margin:0px;padding:0px;overflow:visible" id="mainDiv"  >
         <input id="txtHeight"/>height     <input id="txtWidth"/>width     
        <iframe src="head.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" style="width:100%; height: 47px" frameborder="0"  ></iframe>
        <iframe src="left.aspx" name="leftFrame" scrolling="yes"   id="Iframe1" title="leftFrame" onload="resizer('Iframe1');" style="top:0px;left:0px;right:0px;bottom:0px;width: 30%; border:none;border-spacing:0px; justify-content:space-around;" ></iframe>
        <iframe src="index.aspx" name="mainFrame" id="Iframe2" title="mainFrame" scrolling="yes" marginheight="0" frameborder="0" style="width: 65%; height:100%; overflow:visible;overflow-x:visible;overflow-y:visible; "  onload="resizer('Iframe2');" ></iframe>
</div>

Zarf: IE 10, Windows 7 x64

Biraz deney yaptıktan sonra başka bir çözüm buldum. Başlangıçta bu soruya 'en iyi cevap' olarak işaretlenmiş kodu denedim ve işe yaramadı. Tahminimce, o zamanlar programımdaki iframe dinamik olarak oluşturuldu. İşte kullandığım kod (benim için çalıştı):

Yüklenen iframe içindeki Javascript:

window.onload = function()
    {
        parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
        parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
    };

Kaydırma çubuklarını kaldırmak için yüksekliğe 4 veya daha fazla piksel eklemek gerekir (bazı garip hata / iframe efektleri). Genişlik daha da tuhaftır, vücudun genişliğine 18 piksel eklemek güvenlidir. Ayrıca, iframe gövdesi için css uyguladığınızdan emin olun (aşağıda).

html, body {
   margin:0;
   padding:0;
   display:table;
}

iframe {
   border:0;
   padding:0;
   margin:0;
}

İşte iframe için html:

<iframe id="fileUploadIframe" src="php/upload/singleUpload.html"></iframe>

İşte benim iframe içindeki tüm kod:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>File Upload</title>
    <style type="text/css">
    html, body {
        margin:0;
        padding:0;
        display:table;
    }
    </style>
    <script type="text/javascript">
    window.onload = function()
    {
        parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
        parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
    };
    </script>
</head>
<body>
    This is a test.<br>
    testing
</body>
</html>

Ben krom ve biraz firefox (windows xp) test yaptık. Daha yapacak daha fazla testim var, bu yüzden lütfen bunun sizin için nasıl çalıştığını söyleyin.

Bunu nasıl yaparım (FF / Chrome'da test edildi):

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
    $(iframe).height($(iframe).contents().find('html').height());
}
</script>

<iframe src="page.html" width="100%" height="100" marginheight="0" frameborder="0" onload="autoResize(this);"></iframe>

İşte birkaç yöntem:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

VE BAŞKA BİR ALTERNATİF

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

YUKARIYA GÖSTERİLEN 2 ALTERNATİF İLE KAYDIRMAYI Gizlemek

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

İKİNCİ KODLA HACK

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

İFrame'in kaydırma çubuklarını gizlemek için üst öğe kaydırma çubuklarını gizlemek için "taşma: gizli" yapılır ve iFrame, kaydırma çubuklarını sayfanın dışına zorlayan ve gövde yapmadığı için% 150 genişliğe ve yüksekliğe kadar yapılır. t İfadenin sayfanın sınırlarını aşmasını beklemeyeceğiniz kaydırma çubuklarına sahip olmak. Bu, iFrame'in kaydırma çubuklarını tam genişlikte gizler!

kaynak: iframe otomatik yüksekliğini ayarla

Birinin buraya gelmesi durumunda: iframe'den div'ları kaldırdığımda çözümlerle ilgili bir sorunum vardı - iframe kısalmadı.

İşi yapan bir Jquery eklentisi var:

http://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.html

Daha iyi çalışmak için bu yeniden boyutlandırıcı buldum:

function resizer(id)
{

    var doc = document.getElementById(id).contentWindow.document;
    var body_ = doc.body;
    var html_ = doc.documentElement;

    var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight,     html_.scrollHeight, html_.offsetHeight );
    var width  = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );

    document.getElementById(id).height = height;
    document.getElementById(id).width = width;

}

Stil nesnesinin kaldırıldığını unutmayın.

JQuery, bu gerçekten bana yardım, benim için en iyi seçenek !! Sana yardım etmesini bekliyorum!

iframe

<iframe src="" frameborder="0" id="iframe" width="100%"></iframe>

jQuery

<script>            
        var valueSize = $( "#iframe" ).offset();
        var totalsize = (valueSize.top * 2) + valueSize.left;

        $( "#iframe" ).height(totalsize);            

</script>

bağlam

Bunu bir web uzantısı bağlamında kendim yapmak zorunda kaldım. Bu web uzantısı, her sayfaya bir parça kullanıcı arayüzü enjekte eder ve bu kullanıcı arayüzü bir iframe. İçindeki içerik iframedinamiktir, bu yüzden kendi genişliğini ve yüksekliğini yeniden ayarlamak zorunda kaldım iframe.

Kullandığım Tepki ancak kavram her kütüphane için geçerlidir.

Çözümüm (bu, hem sayfayı hem de iframe'i kontrol ettiğinizi varsayar)

İçinde iframeDeğiştim bodystilleri gerçekten büyük boyutlara sahip olması. Bu, içerideki elemanların gerekli tüm alanı kullanarak yerleşmesine izin verecektir. Yapma widthve height% 100 benim için işe yaramadı (sanırım iframe'in bir varsayılanı var width = 300pxve height = 150px)

/* something like this */
body {
  width: 99999px;
  height: 99999px;
}

Sonra tüm iframe kullanıcı arayüzünü bir div içine enjekte ettim ve bazı stiller verdim

#ui-root {
  display: 'inline-block';     
}

Bu #ui-root( benim içinde bunu yapmak React içinde componentDidMount) benim app render sonra Bu div gibi boyutları hesaplamak ve kullanarak ana sayfaya onları senkronize window.postMessage:

let elRect = el.getBoundingClientRect()
window.parent.postMessage({
  type: 'resize-iframe',
  payload: {
    width: elRect.width,
    height: elRect.height
  }
}, '*')

Üst çerçevede böyle bir şey yapıyorum:

window.addEventListener('message', (ev) => {
  if(ev.data.type && ev.data.type === 'resize-iframe') {
    iframe.style.width = ev.data.payload.width + 'px'
    iframe.style.height = ev.data.payload.height + 'px'
  }
}, false)

Orada olmadığı gibi davranan "hayalet benzeri" bir IFrame yapmak mümkündür.

Bkz. Http://codecopy.wordpress.com/2013/02/22/ghost-iframe-crossdomain-iframe-resize/

Temel olarak https://developer.mozilla.org/en-US/docs/DOM/window.postMessage'daparent.postMessage(..) açıklanan olay sistemini kullanırsınız.

Bu, tüm modern tarayıcılarda çalışır!

Gönderinin eski olduğunu biliyorum, ama bunun başka bir yol olduğuna inanıyorum. Sadece kodumu uyguladım. Hem sayfa yüklemesinde hem de sayfa yeniden boyutlandırmasında mükemmel çalışır:

var videoHeight;
var videoWidth;
var iframeHeight;
var iframeWidth;

function resizeIframe(){
    videoHeight = $('.video-container').height();//iframe parent div's height
    videoWidth = $('.video-container').width();//iframe parent div's width

    iframeHeight = $('.youtubeFrames').height(videoHeight);//iframe's height
    iframeWidth = $('.youtubeFrames').width(videoWidth);//iframe's width
}
resizeIframe();


$(window).on('resize', function(){
    resizeIframe();
});

Başlığa yerleştirilecek Javascript:

function resizeIframe(obj) {
        obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
      }

İşte iframe html kodu:

<iframe class="spec_iframe" seamless="seamless" frameborder="0" scrolling="no" id="iframe" onload="javascript:resizeIframe(this);" src="somepage.php" style="height: 1726px;"></iframe>

Css stil sayfası

>

.spec_iframe {
        width: 100%;
        overflow: hidden;
    }

Angularjs yönergesi niteliği için:

G.directive ( 'previewIframe', function () {
return {
    restrict : 'A',
    replace : true,
    scope : true,
    link : function ( scope, elem, attrs ) {
        elem.on ( 'load', function ( e ) {
            var currentH = this.contentWindow.document.body.scrollHeight;
            this.style.height = eval( currentH ) + ( (25 / 100)* eval( currentH ) ) + 'px';
        } );
    }
};
} );

Yüzde dikkat edin, i iframe, metin, reklamlar vb.

Ben böyle yükledim ya da işler değişti.

parent.jQuery("#frame").height(document.body.scrollHeight+50);

Açıkçası birçok senaryo var, ancak belge ve iframe için aynı etki alanına sahiptim ve bunu iframe içeriğimin sonuna kadar yapıştırabildim:

var parentContainer = parent.document.querySelector("iframe[src*=\"" + window.location.pathname + "\"]");
parentContainer.style.height = document.body.scrollHeight + 50 + 'px';

Bu, üst kabı 'bulur' ve ardından kaydırma çubuğunu kaldırmak için 50 piksel geçme katsayısına eklenen uzunluğu ayarlar.

Doküman yüksekliği değişimini 'gözlemleyecek' hiçbir şey yok, bu benim kullanım durumum için gerekli değildi. Cevabımda, üst / iframe içeriğine pişmiş kimlikler kullanmadan ana kapsayıcıya başvurmanın bir yolunu getiriyorum.

Sabit bir en boy oranıyla yaşayabilir ve duyarlı bir iframe istiyorsanız , bu kod sizin için yararlı olacaktır. Sadece CSS kuralları.

.iframe-container {
  overflow: hidden;
  /* Calculated from the aspect ration of the content (in case of 16:9 it is 9/16= 
  0.5625) */
  padding-top: 56.25%;
  position: relative;
}
.iframe-container iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

İframe'in div olarak kapsayıcısı olmalıdır.

<div class="iframe-container">
   <iframe src="http://example.org"></iframe>
</div>

Kaynak kodu bu siteye dayanıyor ve Ben Marshall'ın iyi bir açıklaması var.

Basitlik :

var iframe = $("#myframe");
$(iframe.get(0).contentWindow).on("resize", function(){
    iframe.width(iframe.get(0).contentWindow.document.body.scrollWidth);
    iframe.height(iframe.get(0).contentWindow.document.body.scrollHeight);
});

İçerik çok basit bir html ise, en basit yol iframe'i javascript ile kaldırmaktır

HTML Kodu:

<div class="iframe">
    <iframe src="./mypage.html" frameborder="0" onload="removeIframe(this);"></iframe>
</div>

Javascript kodu:

function removeIframe(obj) {
    var iframeDocument = obj.contentDocument || obj.contentWindow.document;
    var mycontent = iframeDocument.getElementsByTagName("body")[0].innerHTML;
    obj.remove();
    document.getElementsByClassName("iframe")[0].innerHTML = mycontent;
}

<iframe src="hello.html" sandbox="allow-same-origin"
        onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';this.style.width=(this.contentWindow.document.body.scrollWidth+20)+'px';">
</iframe>