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

Iframe pelaksanaan penyelesaian_jquery ketinggian penyesuaian silang penyemak imbas

WBOY
WBOYasal
2016-05-16 16:38:041204semak imbas

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>

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>

Nota:

Di sini

$(window.parent.document).find("#if1").height($("#content").height()); 

Ayat ini asalnya berbunyi:

$(window.parent.document).find("#if1").height($(document).height());

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.

Kenyataan:
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