快捷導(dǎo)航

Iframe實(shí)現(xiàn)跨瀏覽器自適應(yīng)高度解決方法

更新時(shí)間：2014年09月02日 10:34:51 投稿：shichen2014

這篇文章主要介紹了Iframe實(shí)現(xiàn)跨瀏覽器自適應(yīng)高度解決方法,通過父層容器的應(yīng)用來實(shí)現(xiàn)這一功能,非常實(shí)用的一個(gè)技巧,需要的朋友可以參考下

本文以實(shí)例形式講述了Iframe實(shí)現(xiàn)跨瀏覽器自適應(yīng)高度解決方法，非常具有實(shí)用價(jià)值。分享給大家供大家參考之用。具體方法如下：

該方法使用了jQuery，因此需要在iframe的src頁面里面引入jQuery。

父頁面里面相對(duì)簡單一點(diǎn)，主要包含以下代碼：

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

在iframe的src頁面里面代碼如下：

<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">超級(jí)鏈接</a></div>
 <div class="mnav"><a href="ProductCategory.html">超級(jí)鏈接</a></div>
 <div class="mnav"><a href="ProductCategory.html">超級(jí)鏈接</a></div>
 <div id="test400" style="display:none;height:400px;"></div>
 <div class="mnav"><a href="Orders.html">超級(jí)鏈接</a></div>
 <div class="mnav Mcurrent"><a href="Keywords.html">超級(jí)鏈接</a></div>
 <div class="mnav"><a href="#">超級(jí)鏈接</a></div>
 <div class="mnav"><a href="#">超級(jí)鏈接</a></div>
 <div class="mnav"><a href="#">超級(jí)鏈接</a></div>
 <div class="mnav"><a href="#">超級(jí)鏈接</a></div>
 <div class="mnav"><a href="#">超級(jí)鏈接</a></div>
 <div class="mnav"><a href="#">超級(jí)鏈接</a></div>
 <br />
</div>

注釋：

這里面的

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

這句話最初是：

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

可以實(shí)現(xiàn)自適應(yīng)高度，但是不能實(shí)現(xiàn)縮放自適應(yīng)。因?yàn)閐ocument的高度是展示內(nèi)容出現(xiàn)過的最高高度，所以這里如果點(diǎn)擊展開，iframe不會(huì)縮小，只會(huì)展示最高出現(xiàn)過的高度。

所以這里要用一個(gè)父層容器，也就是最新的代碼。這樣就可以實(shí)現(xiàn)自適應(yīng)了。

相信本文所述對(duì)大家的jQuery程序設(shè)計(jì)有一定的借鑒價(jià)值。

您可能感興趣的文章:

相關(guān)文章

jQuery的鏈?zhǔn)秸{(diào)用淺析
并不是所有的瀏覽器都暴露了dom的對(duì)象原型,所以不能通過簡單擴(kuò)展原型方法并通過return this的形式來實(shí)現(xiàn)跨瀏覽器的鏈?zhǔn)秸{(diào)用,jquery采用了包裝器的方式來解決了這個(gè)問題。
2010-12-12
jQuery對(duì)val和atrr("value")賦值的區(qū)別介紹
jQuery中val和atrr(value),對(duì)瀏覽器的區(qū)別，有默認(rèn)值的情況下，如果用val()賦值了，那么當(dāng)修改這個(gè)值得時(shí)候，google不能獲取最新的值，但是ie可以
2014-09-09
jQuery模擬Marquee實(shí)現(xiàn)無縫滾動(dòng)效果完整實(shí)例
這篇文章主要介紹了jQuery模擬Marquee實(shí)現(xiàn)無縫滾動(dòng)效果,結(jié)合完整實(shí)例形式分析了jQuery針對(duì)圖片與文字的無縫滾動(dòng)效果實(shí)現(xiàn)技巧,需要的朋友可以參考下
2016-09-09
JQuery右鍵菜單插件ContextMenu使用指南
這篇文章主要介紹了JQuery右鍵菜單插件ContextMenu使用指南,需要的朋友可以參考下
2014-12-12
jquery刪除指定的html標(biāo)簽并保留標(biāo)簽內(nèi)文本內(nèi)容的方法
有時(shí)我們希望刪除這段html代碼里面的一對(duì)<p>標(biāo)簽，但是要保持里面的內(nèi)容不被刪除，本文提供的這個(gè)jquery方法就可以簡單實(shí)現(xiàn)。
2014-04-04
jquery lazyload延遲加載技術(shù)的實(shí)現(xiàn)原理分析
懶加載技術(shù)(簡稱lazyload)并不是新技術(shù)，它是js程序員對(duì)網(wǎng)頁性能優(yōu)化的一種方案。lazyload的核心是按需加載。在大型網(wǎng)站中都有l(wèi)azyload的身影，例如谷歌的圖片搜索頁，迅雷首頁，淘寶網(wǎng)，QQ空間等。
2011-01-01
jQuery+CSS3+Html5實(shí)現(xiàn)彈出層效果實(shí)例代碼(附源碼下載)
款Jquery+CSS3+Html5實(shí)現(xiàn)彈出層效果,應(yīng)用范圍很廣泛,比如用在消息提示、彈出層顯示內(nèi)容、彈出層登錄等,帶遮罩效果，非常實(shí)用，對(duì)此功能感興趣的朋友可以參考下本地代碼
2016-05-05
jquery實(shí)現(xiàn)鼠標(biāo)滑過后動(dòng)態(tài)圖片提示效果實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)鼠標(biāo)滑過后動(dòng)態(tài)圖片提示效果,涉及jquery鼠標(biāo)事件及頁面元素的動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
jQuery.Form上傳文件操作
這篇文章主要介紹了jQuery.Form上傳文件操作,首先需要我們先建立test文件夾，具體代碼內(nèi)容大家通過本文學(xué)習(xí)下吧
2017-02-02
jQuery中:disabled選擇器用法實(shí)例
這篇文章主要介紹了jQuery中:disabled選擇器用法,實(shí)例分析了:disabled選擇器功能、定義及選取所有禁用的表單元素的技巧,需要的朋友可以參考下
2015-01-01