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

  • Easy Learn Tutorial

    Easy Learn T

    10 Kasım 2012
  • HTC Tutorials

    HTC Tutorial

    21 EYLÜL 2010
  • Orson Wang

    Orson Wang

    28 EKİM 2006