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

  • bunliu

    bunliu

    2 Mayıs 2007
  • Dopelives

    Dopelives

    30 Temmuz 2009
  • Microsoft Help & Training Videos

    Microsoft He

    31 Mart 2009