SORU
2 EKİM 2010, CUMARTESİ


bir WordPress kullanmak yüklendiğinde iframe içeriğinin yüksekliği olsun

Main.php bir iframe içinde yükleme olduğumu Yardım sayfası var, help.php Nasıl iframe içinde yüklenince Bu sayfanın boyunu alabilir miyim?

100% iframe veya otomatik yükseklik stil edemem çünkü bu soruyorum. Javascript..kullanmam gerekiyor sanırım. JQuery kullanıyorum

CSS:

body {
    margin: 0;
    padding: 0;
}
.container {
    width: 900px;
    height: 100%;
    margin: 0 auto;
    background: silver;
}
.help-div {
    display: none;
    width: 850px;
    height: 100%;
    position: absolute;
    top: 100px;
    background: orange;
}
#help-frame {
    width: 100%;
    height: auto;
    margin:0;
    padding:0;
}

JS:

$(document).ready(function () {
    $("a.open-help").click(function () {
        $(".help-div").show();
        return false;
    })
})

HTML:

<div class='container'>
    <!-- -->
    <div class='help-div'>
        <p>This is a div with an iframe loading the help page</p>
        <iframe id="help-frame" src="../help.php" width="100%" height="100%" frameborder="1"></iframe>
    </div>  <a class="open-help" href="#">open Help in iFrame</a>

    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
</div>

CEVAP
3 EKİM 2010, Pazar


Tamam sonunda iyi bir çözüm buldu

$('iframe').load(function() {
    this.style.height =
    this.contentWindow.document.body.offsetHeight   'px';
});

Bazı tarayıcılar (eski Safari ve Opera) yüklendiğinde CSS açıklamadan önce tamamlanan rapor çünkü mikro zaman Aşımı ve boş bir yola ve iframe src yeniden atamanız gerekir.

$('iframe').load(function() {
    setTimeout(iResize, 50);
    // Safari and Opera need a kick-start.
    var iSource = document.getElementById('your-iframe-id').src;
    document.getElementById('your-iframe-id').src = '';
    document.getElementById('your-iframe-id').src = iSource;
});
function iResize() {
    document.getElementById('your-iframe-id').style.height = 
    document.getElementById('your-iframe-id').contentWindow.document.body.offsetHeight   'px';
}

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • GFX Tutorials

    GFX Tutorial

    12 AĞUSTOS 2013
  • LearnKey

    LearnKey

    19 AĞUSTOS 2008
  • michaeljacksonVEVO

    michaeljacks

    2 EYLÜL 2009