Iframe實現跨瀏覽器自適應高度解決方法

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

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

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

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

父頁面里面相對簡單一點，主要包含以下代碼：

<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">超級鏈接</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>

注釋：

這里面的

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

這句話最初是：

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

可以實現自適應高度，但是不能實現縮放自適應。因為document的高度是展示內容出現過的最高高度，所以這里如果點擊展開，iframe不會縮小，只會展示最高出現過的高度。

所以這里要用一個父層容器，也就是最新的代碼。這樣就可以實現自適應了。

相信本文所述對大家的jQuery程序設計有一定的借鑒價值。

您可能感興趣的文章:

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