Rumah > hujung hadapan web > tutorial js > Iframe pelaksanaan penyelesaian_jquery ketinggian penyesuaian silang penyemak imbas

Iframe pelaksanaan penyelesaian_jquery ketinggian penyesuaian silang penyemak imbas

WBOY
Lepaskan: 2016-05-16 16:38:04
asal
1220 orang telah melayarinya

Artikel ini menerangkan penyelesaian ketinggian penyesuaian silang penyemak imbas untuk Iframe dalam bentuk contoh, yang mempunyai nilai praktikal yang hebat. Kongsikan dengan semua orang untuk rujukan anda. Kaedah khusus adalah seperti berikut:

Kaedah ini menggunakan jQuery, jadi jQuery perlu diperkenalkan ke dalam halaman src iframe.

Halaman induk agak mudah dan terutamanya mengandungi kod berikut:

<iframe id="if1" scrolling="no" src="2.html"></iframe>

Salin selepas log masuk

Kod dalam halaman src iframe adalah seperti berikut:

<script type="text/javascript">
function resizeContent()
{
    $(window.parent.document).find("#if1").height($("#content").height());
}

function show400()
{
    if($("#test400").css("display") == "none")
    {
       $("#test400").css("display","");
       resizeContent();
    }
    else
    {
       $("#test400").css("display","none");
       resizeContent();
    }
}
$(document).ready(function(){
    resizeContent();
})
</script>
<div id="left111">
 <div class="mnav" onclick="test400()"></div>
 <div class="mnav"><a href="ProductList.html">超级链接</a></div>
 <div class="mnav"><a href="ProductCategory.html">超级链接</a></div>
 <div class="mnav"><a href="ProductCategory.html">超级链接</a></div>
 <div id="test400" style="display:none;height:400px;"></div>
 <div class="mnav"><a href="Orders.html">超级链接</a></div>
 <div class="mnav Mcurrent"><a href="Keywords.html">超级链接</a></div>
 <div class="mnav"><a href="#">超级链接</a></div>
 <div class="mnav"><a href="#">超级链接</a></div>
 <div class="mnav"><a href="#">超级链接</a></div>
 <div class="mnav"><a href="#">超级链接</a></div>
 <div class="mnav"><a href="#">超级链接</a></div>
 <div class="mnav"><a href="#">超级链接</a></div>
 <br />
</div>

Salin selepas log masuk

Nota:

Di sini

$(window.parent.document).find("#if1").height($("#content").height()); 
Salin selepas log masuk

Ayat ini asalnya berbunyi:

$(window.parent.document).find("#if1").height($(document).height());
Salin selepas log masuk

Ketinggian penyesuaian boleh dicapai, tetapi penyesuaian skala tidak boleh dicapai. Oleh kerana ketinggian dokumen adalah ketinggian tertinggi yang pernah dipaparkan oleh kandungan yang dipaparkan, jadi jika anda mengklik untuk mengembangkan di sini, iframe tidak akan mengecut dan hanya akan memaparkan ketinggian tertinggi pernah .

Jadi bekas induk digunakan di sini, iaitu kod terkini. Dengan cara ini, penyesuaian diri dapat dicapai.

Saya percaya bahawa apa yang diterangkan dalam artikel ini mempunyai nilai rujukan tertentu untuk pengaturcaraan jQuery semua orang.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan