içindeki içeriğe göre iframe yüksekliğini dinamik hale getirme- JQUERY / Javascript

203

Bir iframe içinde bir aspx web sayfası yüklüyorum. Iframe'deki içerik iframe'in yüksekliğinden daha yüksek olabilir. İframe'de kaydırma çubukları olmamalıdır.

divTemelde tüm içerik iframe içinde bir sarıcı etiketi var. Yeniden boyutlandırma yapmak için bazı jQuery yazdım:

$("#TB_window", window.parent.document).height($("body").height() + 50);

bulunduğu TB_windowdiv nerede Iframe.

body - iframe içindeki aspx'in gövde etiketi.

Bu komut dosyası iframe içeriğine eklenir. TB_windowÖğeyi üst sayfadan alıyorum . Bu Chrome'da iyi çalışır, ancak TB_window Firefox'ta daraltır. Bunun neden olduğu konusunda gerçekten kafam karıştı / kayboldum.

javascript  jquery  asp.net  iframe 
— Karry
kaynak
.aspx iframe sayfası aynı alan adından mı?
— AlexC
$ ("body"). height () öğesinin firefox'ta bir değeri olup olmadığını kontrol edebilir misiniz?
— Michael L Watson
evet .. iframe kapsayıcı sayfası ile aynı alandadır
— karry
@MichaelLWatson Görünüşe göre kundakçı saat penceresinin vücut yüksekliği için 0 değeri var ... Krom olsa bir değeri var
— karry
Açısal iFrame Otomatik Yükseklik örneği: gitlab.com/reduardo7/angular-iframe-auto-height
— Eduardo Cuomo

Yanıtlar:

213

IFRAMEİçeriğinin yüksekliğini aşağıdakileri kullanarak alabilirsiniz: contentWindow.document.body.scrollHeight

Sonra IFRAMEyüklenir, daha sonra aşağıdaki işlemleri yüksekliğini değiştirebilirsiniz:

<script type="text/javascript">
  function iframeLoaded() {
      var iFrameID = document.getElementById('idIframe');
      if(iFrameID) {
            // here you can make the height, I delete it first, then I make it again
            iFrameID.height = "";
            iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
      }   
  }
</script>

Ardından, IFRAMEetikette, işleyiciyi şu şekilde bağlarsınız:

<iframe id="idIframe" onload="iframeLoaded()" ...

Bir süre önce iframeLoaded, IFRAMEiçinde bir form gönderildikten sonra kendisinden aramam gereken bir durum vardı . Bunu, IFRAMEiçerik komut dosyalarında aşağıdakileri yaparak yapabilirsiniz :

parent.iframeLoaded();
— Aristos
kaynak
153
Web Alanları Arası desteklenmez.
— Soumya
3
@Soumya Web alanları arası kodun bu kodla ilgisi yoktur. Bir komutla atladığınız bir güvenlik sorunu var.
— Aristos
9
@Soumya Aşağıdaki X-FRAME-OPTIONSgibi bir satır eklemek için arayın : Response.AddHeader("X-FRAME-OPTIONS", "SAMEORIGIN");veyaresponse.addHeader("X-FRAME-OPTIONS", "Allow-From https://some.othersite.com");
— Aristos
15
Bu, alanlar
— David Bradshaw
2
@deebs Ayrıca değiştirmeyi deneyebilirsiniz iFrameID.height = "";için iFrameID.height = "20px";. Varsayılan tarayıcı iframe yüksekliği 150 pikseldir, bu da ""onu sıfırlar.
— philfreo
112

Aristos'a biraz gelişmiş bir cevap ...

<script type="text/javascript">
  function resizeIframe(iframe) {
    iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
  }
</script>

Ardından iframe'inizde şu şekilde beyan edin:

<iframe onload="resizeIframe(this)" ...

İki küçük iyileştirme var:

  1. Öğe zaten onload geri çağrısında bulunduğundan, document.getElementById yoluyla alınmanıza gerek yoktur.
  2. Bir iframe.height = ""sonraki ifadede yeniden atayacağınızı ayarlamanıza gerek yoktur . Bunu yapmak, bir DOM öğesiyle uğraşırken genel olarak ek yüke neden olur.

Düzenleme: Çerçevedeki içerik her zaman değişiyorsa arayın:

parent.resizeIframe(this.frameElement);

güncellemeden sonra iframe içinden. Aynı köken için çalışır.

Veya otomatik olarak algılamak için:

  // on resize
  this.container = this.frameElement.contentWindow.document.body;

  this.watch = () => {
    cancelAnimationFrame(this.watcher);

    if (this.lastScrollHeight !== container.scrollHeight) {
      parent.resizeIframeToContentSize(this.frameElement);  
    }
    this.lastScrollHeight = container.scrollHeight;
    this.watcher = requestAnimationFrame(this.watch);
  };
  this.watcher = window.requestAnimationFrame(this.watch);
— Lüfer
kaynak
6
Çerçevedeki içerik her zaman değişiyorsa ne yapardınız?
— Kevin
İçerik boyutu değişmeye devam ederse ve / veya iframe'iniz, iframe'in sayfayı çektiği alan adı dışındaki diğer alanlara oturacak şekilde tasarlanmışsa, farklı bir şey yapmanız gerekir.
— BlueFish
4
Bunun için ... çözüm postMessage ve takeMessage kullanmaktır. Bunu github.com/jeffomatic/nojquery-postmessage
— BlueFish
Fikir, yeni yüksekliği hesaplamak ve üst çerçeveye mesajı alması ve iframe'in yüksekliğini buna göre ayarlaması gereken bir mesaj göndermektir.
— BlueFish
Benim için her zaman bazı Pikseller kısaydı, bu yüzden bununla geldim: function resizeIframe(iframe) { var size=iframe.contentWindow.document.body.scrollHeight; var size_new=size+20; iframe.height = size_new + "px"; }
— Martin Mühl
57

X-FRAME-OPTIONS: Allow-From , safari veya chrome'da desteklenmediğinden , kabul edilen yanıtın yeterli olmadığını buldum . Bunun yerine farklı bir yaklaşımla gitti , Disqus'tan Ben Vinegar tarafından verilen bir sunumda bulundu . Fikir, üst pencereye bir olay dinleyicisi eklemektir ve daha sonra iframe içinde, üst öğeye bir şey yapmasını söyleyen bir olay göndermek için window.postMessage kullanın (iframe'i yeniden boyutlandırın).

Üst belgeye bir olay dinleyicisi ekleyin:

window.addEventListener('message', function(e) {
  var $iframe = jQuery("#myIframe");
  var eventName = e.data[0];
  var data = e.data[1];
  switch(eventName) {
    case 'setHeight':
      $iframe.height(data);
      break;
  }
}, false);

Ve iframe'in içine, mesajı göndermek için bir işlev yazın:

function resize() {
  var height = document.getElementsByTagName("html")[0].scrollHeight;
  window.parent.postMessage(["setHeight", height], "*"); 
}

Son olarak, iframe'in içine, yeniden boyutlandırma işlevini başlatmak için gövde etiketine bir onLoad ekleyin:

<body onLoad="resize();">
— Marty Mulligan
kaynak
1
Bunun benim için çalışması için "window.parent" u "ebeveyn" olarak değiştirmek zorunda kaldım.
— prograhammer
Harika! ancak yüksekliği sadece bir kez yükler. İframe'i gerçekten duyarlı hale getirmek istiyorsanız, yeniden boyutlandırma yöntemini her saniye çağırmayı tercih ederim, şöyle:setInterval(resize, 1000);
— Jules Colle
12

Bunu iframe'e ekleyin, bu benim için çalıştı:

onload="this.height=this.contentWindow.document.body.scrollHeight;"

Ve jQuery kullanıyorsanız bu kodu deneyin:

onload="$(this).height($(this.contentWindow.document.body).find(\'div\').first().height());"
— Mohit Aneja
kaynak
6

Bir iFrame'deki içeriğin yüksekliğini elde etmek için bakabileceğiniz dört farklı özellik vardır.

document.documentElement.scrollHeight
document.documentElement.offsetHeight
document.body.scrollHeight
document.body.offsetHeight

Ne yazık ki hepsi farklı cevaplar verebilir ve bunlar tarayıcılar arasında tutarsızdır. Gövde kenar boşluğunu 0 olarak ayarlarsanız, document.body.offsetHeighten iyi yanıtı verir. Doğru değeri elde etmek için bu işlevi deneyin; içerik değiştiğinde veya tarayıcı yeniden boyutlandırıldığında iFrame'i doğru boyutta tuttuktan sonra da görünen iframe-yeniden boyutlandırma kitaplığından alınır .

function getIFrameHeight(){
    function getComputedBodyStyle(prop) {
        function getPixelValue(value) {
            var PIXEL = /^\d+(px)?$/i;

            if (PIXEL.test(value)) {
                return parseInt(value,base);
            }

            var 
                style = el.style.left,
                runtimeStyle = el.runtimeStyle.left;

            el.runtimeStyle.left = el.currentStyle.left;
            el.style.left = value || 0;
            value = el.style.pixelLeft;
            el.style.left = style;
            el.runtimeStyle.left = runtimeStyle;

            return value;
        }

        var 
            el = document.body,
            retVal = 0;

        if (document.defaultView && document.defaultView.getComputedStyle) {
            retVal =  document.defaultView.getComputedStyle(el, null)[prop];
        } else {//IE8 & below
            retVal =  getPixelValue(el.currentStyle[prop]);
        } 

        return parseInt(retVal,10);
    }

    return document.body.offsetHeight +
        getComputedBodyStyle('marginTop') +
        getComputedBodyStyle('marginBottom');
}
— David Bradshaw
kaynak
Bu, veri tabloları veya değişken div'ler gibi "toplanan" öğelerle çalışmaz. Yükseklik, nihai yüksekliğe değil, normal açılma yüksekliğinin ne olacağına bağlıdır.
— djack109
@ djack109 büyük olasılıkla CSS'nizdeki bir şey sayfanızda bir öğenin daralmasını durdurur
— David Bradshaw
3

Diğer cevaplar benim için çalışmıyor bu yüzden bazı değişiklikler yaptım. Umarım bu yardımcı olur

$('#iframe').on("load", function() {
    var iframe = $(window.top.document).find("#iframe");
    iframe.height(iframe[0].ownerDocument.body.scrollHeight+'px' );
});
— Ravi
kaynak
2

Javscript / jquery kullanmak yerine bulduğum en kolay yolu: 

<iframe style="min-height:98vh" src="http://yourdomain.com" width="100%"></iframe>
Snippet'i genişlet

Burada 1vh = Tarayıcı penceresi yüksekliğinin% 1'i. Bu nedenle ayarlanacak olan yüksekliğin teorik değeri 100vh, ancak pratikte 98vh büyüyü yaptı.

— Binod
kaynak
9
Bu, iframe'in içerik yüksekliğini dikkate almaz.
— Adrian Pauly
— Alanlar
2

Bunun herkese yardım etmesi durumunda. Bunu işe almaya çalışırken saçlarımı çekiyordum, sonra iframe'in yükseklikte bir sınıf girişi olduğunu fark ettim:% 100. Bunu kaldırdığımda, her şey beklendiği gibi çalıştı. Bu nedenle, lütfen herhangi bir css çakışması olup olmadığını kontrol edin.

— user8640976
kaynak
2

Ayrıca, resizeIframe'inize (örneğin @ BlueFish'in cevabından) tarayıcı düzenini boyamadan önce her zaman çağrılacak bir yinelenen requestAnimationFrame ekleyebilir ve içeriği yüksekliğini değiştirdiğinde iframe'in yüksekliğini güncelleyebilirsiniz. giriş formları, tembel yüklenen içerik vb.

<script type="text/javascript">
  function resizeIframe(iframe) {
    iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
    window.requestAnimationFrame(() => resizeIframe(iframe));
  }
</script>  

<iframe onload="resizeIframe(this)" ...

geri aramanızın genel performansınız üzerinde büyük bir etkisi olmayacak kadar hızlı olması gerekir

— user2520818
kaynak
1
Bu, ilk testlerden itibaren çok iyi çalışan çok kaygan bir çözümdür. Bunu kullanmanın performans sonuçlarıyla ilgilenirim.
— KFE
Sadece bir durumda koştu Uncaught TypeError: Cannot read property 'scrollHeight' of nullberi bodyolduğu nullancak genellikle çalışır.
— caot
1

JQuery ve aşağıdaki kod benim için çalışıyor kullanıyorum,

var iframe = $(window.top.document).find("#iframe_id_here");
iframe.height(iframe.contents().height()+'px' );
— srijishks
kaynak
0

Troy'un cevabının işe yaramadığını buldum. Bu, ajax için elden geçirilen kodla aynıdır:

$.ajax({                                      
    url: 'data.php',    
    dataType: 'json',                             

    success: function(data)
    {
        // Put the data onto the page

        // Resize the iframe
        var iframe = $(window.top.document).find("#iframe");
        iframe.height( iframe[0].contentDocument.body.scrollHeight+'px' );
    }
});
— Martin Lester
kaynak
0

Altta kesilmiş gibi görünen pencere yığınına eklemek için, özellikle kaydırma yapmadığınız zamanlarda kullandım:

function resizeIframe(iframe) {
    var addHeight = 20; //or whatever size is being cut off
    iframe.height = iframe.contentWindow.document.body.scrollHeight + addHeight + "px";
  }
— Matt Stacey
kaynak
0

Bu, jquery içermeyen bir çözüme ihtiyaç duyduğunuzda yararlıdır. Bu durumda, bir kap eklemeyi ve yüzdelere bir dolgu koymayı denemelisiniz

HTML örnek kodu:

<div class="iframecontainer">
    <iframe scrolling="no" src="..." class="iframeclass"width="999px" height="618px"></iframe>
</div>

CSS örnek kodu:

.iframeclass{
    position: absolute;
    top: 0;
    width: 100%;
}

.iframecontainer{
    position: relative;
    width: 100%;
    height: auto;
    padding-top: 61%;
}
— Juan M
kaynak
0

Basit çözüm, içerik alanının genişliğini ve yüksekliğini ölçmek ve daha sonra bu ölçümleri alt dolgu yüzdesini hesaplamak için kullanmaktır.

Bu durumda, ölçümler 1680 x 720 pikseldir, bu nedenle alttaki dolgu% 720'ye kadar 720/1680 = 0.43 * 100'dür.

.canvas-container {    
    position: relative;
    padding-bottom: 43%; // (720 ÷ 1680 = 0.4286 = 43%)
    height: 0;
    overflow: hidden;   
}

.canvas-container iframe {    
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;   
}
— Loek
kaynak
0

BlueFish'e biraz daha gelişmiş bir cevap ...

function resizeIframe(iframe) {
    var padding = 50;
    if (iframe.contentWindow.document.body.scrollHeight < (window.innerHeight - padding))
        iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
    else
        iframe.height = (window.innerHeight - padding) + "px";
}

Duyarlı tasarıma ve büyük yüksekliğe sahip iframe'lere iyi gelen Windows ekranının (tarayıcı, telefon) yüksekliğini dikkate alır. Dolgu, tüm ekrandan geçmesi durumunda iframe'in üstünde ve altında istediğiniz dolguyu temsil eder.

— Tadej İntikamı
kaynak
0 
jQuery('.home_vidio_img1 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery(this).replaceWith(video);
});

jQuery('.home_vidio_img2 img').click(function(){
    video = <iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>;
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

jQuery('.home_vidio_img3 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

jQuery('.home_vidio_img4 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});
— Keyur Savsani
kaynak
0

PHP htmlspecialchars () kullanan örnek + yüksekliğin olup olmadığını ve> 0 olup olmadığını kontrol edin: 

$my_html_markup = ''; // Insert here HTML markup with CSS, JS... '<html><head></head><body>...</body></html>'
$iframe = '<iframe onload="if(this.contentWindow.document.body.scrollHeight) {this.height = this.contentWindow.document.body.scrollHeight;}" width="100%" src="javascript: \''. htmlspecialchars($my_html_markup) . '\'"></iframe>';
— jteks
kaynak
0

iframe kapsayıcısının konumunu yap: mutlak ve iframe, içeriğine göre yüksekliğini otomatik olarak değiştirir

<style>
   .iframe-container {
       display: block;
       position: absolute;
       /*change position as you need*/
       bottom: 0;
       left: 0;
       right: 0;
       top: 0;
   }
   iframe {
       margin: 0;
       padding: 0;
       border: 0;
       width: 100%;
       background-color: #fff;
   }
 </style>
 <div class="iframe-container">
     <iframe src="http://iframesourcepage"></iframe>
 </div>
— Hatem Badawi
kaynak
-1 
$(document).height() // - $('body').offset().top

ve / veya

$(window).height()

Bkz. Yığın Taşması sorusu Bir gövde elemanının yüksekliği nasıl alınır .

JQuery'de vücudun yüksekliğini bulmak için bunu deneyin:

if $("body").height()

Firebug ise bir değeri yok . Belki de sorun budur.

— Michael L Watson
kaynak
İkisini de yapmaya çalıştım ... hala Firefox'ta oluyor. firefox bir şekilde iframe'de window.height () yöntemini almaz. Bahsettiğim gibi, komut dosyası Iframe içeriğine eklenmiştir ve bunu document.ready () işlevinde
— çağırıyorum
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.