Set otomatik olarak yeniden boyutlandırmak için yükseklik içeriği dinamik olarak iframe

SORU

11 AĞUSTOS 2011, PERŞEMBE

Set otomatik olarak yeniden boyutlandırmak için yükseklik içeriği dinamik olarak iframe

Bu içeriği ile bir iframe yüksekliğini değiştirmek için basit bir çözüm için kendimi arıyordum.

Kuralları sayfa tutan bu iframe yüksekliği anlam ifade etmiyor gibi görünüyor. Bu anlaşılan güvenlik nedeniyle. Bunu nasıl yapabiliriz?

CEVAP

14 NİSAN 2014, PAZARTESİ

Bu iframe: Bu iframe sayfasında bazı kod eklemek zorunda anlamına gelir. Sadece İFRAME İÇİNDE kod bu komut Ekle:

<body onload="parent.alertsize(document.body.scrollHeight);">

Holding sayfa: Bu sayfa iframe holding (ID ile benim durumumda="") myiframe küçük bir javascript ekleyin:

<script>
function alertsize(pixels){
    pixels =32;
    document.getElementById('myiframe').style.height=pixels "px";
}
</script>

Şimdi ne olacağını iframe yüklendiğinde bu durumda sayfayı iframe holding ana pencere, bir javascript tetikler.

Bu JavaScript işlevi için birçok (iframe) onun yüksekliğini piksel nasıl gönderir.

Üst pencere numarasını alır, kaydırma çubukları önlemek için 32 ekler ve yeni sayısı için iframe yüksekliğini ayarlar.

Hepsi bu, başka hiçbir şeye ihtiyaç yoktur.

Ama eğer biraz daha küçük hileler okumaya devam derseniz...

İFRAME DİNAMİK YÜKSEKLİK? Eğer bana içerik geçiş yapmak gibi istersen iframe yüksekliğini değiştirmek ve sayfa yüklendiğinde yeniden tetikleme) var. Ben genellikle internette buldum çok basit bir geçiş komut dosyası ekleyin:

<script>
function toggle(obj) {
    var el = document.getElementById(obj);
    if ( el.style.display != 'block' ) el.style.display = 'block';
    else el.style.display = 'none';
}
</script>

bu komut sadece eklemek için:

<script>
function toggle(obj) {
    var el = document.getElementById(obj);
    if ( el.style.display != 'block' ) el.style.display = 'block';
    else el.style.display = 'none';
    parent.alertsize(document.body.scrollHeight); // ADD THIS LINE!
}
</script>

Yukarıdaki komut kullanmak ne kadar kolay

<a href="javascript:toggle('moreheight')">toggle height?</a><br />
<div style="display:none;" id="moreheight">
more height!<br />
more height!<br />
more height!<br />
</div>

Sadece kesip ve buraya yapıştırın gitmek isteyenler için iki sayfa. Benim durumumda aynı klasör içinde onları vardı, ama çapraz etki alanı çok (bence...) çalışması gerekir

Tam sayfa kod holding:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>THE IFRAME HOLDER</title>
<script>
function alertsize(pixels){
    pixels =32;
    document.getElementById('myiframe').style.height=pixels "px";
}
</script>
</head>

<body style="background:silver;">
<iframe src='theiframe.htm' style='width:458px;background:white;' frameborder='0' id="myiframe" scrolling="auto"></iframe>
</body>
</html>

Tam iframe kod:(bu iframe adında "") theiframe.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>IFRAME CONTENT</title>
<script>
function toggle(obj) {
    var el = document.getElementById(obj);
    if ( el.style.display != 'block' ) el.style.display = 'block';
    else el.style.display = 'none';
    parent.alertsize(document.body.scrollHeight);
}
</script>
</head>

<body onload="parent.alertsize(document.body.scrollHeight);">
<a href="javascript:toggle('moreheight')">toggle height?</a><br />
<div style="display:none;" id="moreheight">
more height!<br />
more height!<br />
more height!<br />
</div>
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
THE END

</body>
</html>

Demo

Bunu Paylaş: