使用javascript實現(xiàn)Iframe自適應(yīng)高度

更新時間：2014年12月24日 10:26:24 投稿：hebedich

這篇文章主要介紹了使用javascript實現(xiàn)Iframe自適應(yīng)高度,需要的朋友可以參考下

方法一：

$(window.parent.document).find("#ContentIframe").load(function() {

                    var main = $(window.parent.document).find("#ContentIframe");

                    var thisheight = $(document).height();

                    if (thisheight < 800)

                        thisheight = 800;

                    main.height(thisheight);

                });

這種寫法，只能對于加載的時候?qū)逃性氐淖赃m應(yīng)高度，當(dāng)元素變化的時候（如添加了很多元素，高度變化后）不能及時改變父窗體的iframe高度。

方法二：

復(fù)制代碼代碼如下:

function setMainHeight() {

    var main = $(window.parent.document).find("#ContentIframe");
    var thisheight = $("body").height();
    if (thisheight < 800) { thisheight = 800; }
    main.height(thisheight+50);

    setTimeout(setMainHeight, 2000);
}

添加一個計時器，輪詢判斷子頁面的高度變化。

以上2種都可以是iframe實現(xiàn)高度自適應(yīng)，小伙伴們根據(jù)自己的項目需求，自由選擇吧

您可能感興趣的文章:

相關(guān)文章

JavaScript 轉(zhuǎn)義字符JSON parse錯誤研究
這篇文章主要為大家介紹了JavaScript 轉(zhuǎn)義字符JSON parse錯誤研究，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-10-10
js字符串截取函數(shù)substr substring slice使用對比
字符串截取函數(shù)有substr、substring以及slice等等，下面將為大家介紹下各自的使用，感興趣的朋友可以了解下
2013-11-11
JS中函數(shù)科里化的背景與應(yīng)用實例教程
在數(shù)學(xué)和計算機科學(xué)中,柯里化是一種將使用多個參數(shù)的一個函數(shù)轉(zhuǎn)換成一系列使用一個參數(shù)的函數(shù)的技術(shù),下面這篇文章主要給大家介紹了JS中函數(shù)科里化的背景與應(yīng)用實例的相關(guān)資料,需要的朋友可以參考下
2022-06-06
javascript中的閉包概念與用法實踐分析
這篇文章主要介紹了javascript中的閉包概念與用法,結(jié)合具體實例形式分析了javascript閉包的概念、原理、使用方法及相關(guān)操作注意事項,需要的朋友可以參考下
2019-07-07
uniapp?APP消息推送方案實現(xiàn)全過程
前段時間開發(fā)app的時候要開始做消息推送功能了,下面這篇文章主要給大家介紹了關(guān)于uniapp?APP消息推送方案實現(xiàn)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-01-01
js如何對元素可視區(qū)域進行判定
在前端開發(fā)中，有時候我們需要判斷一個元素是否在可視區(qū)域內(nèi)，本文主要介紹了js如何對元素可視區(qū)域進行判定，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
javascript常用對話框小集
對話框，大家對這個詞匯可謂是各有所解，本文有個不錯的例子，里面包含了各種常見對話框的實現(xiàn)，感興趣的朋友可以了解下
2013-09-09
淺談JS中this在各個場景下的指向
這篇文章主要介紹了淺談JS中this在各個場景下的指向，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
微信小程序開發(fā)中所碰到問題集錦
這篇文章主要介紹了微信小程序開發(fā)中所碰到問題集錦，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
2023-01-01
簡易版本JSON.stringify的實現(xiàn)及其六大特性詳解
最近做項目發(fā)現(xiàn)JSON.stringify()使用場景真的挺多,我們都知道JSON.stringify()的作用是將JavaScript對象轉(zhuǎn)換為JSON字符串,下面這篇文章主要給大家介紹了JSON.stringify的實現(xiàn)及其六大特性的相關(guān)資料,需要的朋友可以參考下
2021-10-10