如何更新iframe的高度?

时间:2016-02-28 14:40:26

标签: javascript jquery html css iframe

如何更新iframe的高度?

Parent.html

<iframe onload="iframeLoaded('settings')" id="settings" src="myIframe.html" frameborder="0" border="0" cellspacing="0" style="border-style: none;width: 100%;"></iframe>

家长js

        function iframeLoaded(meth) {
            var iFrameID = document.getElementById(meth);
            if(iFrameID) {
                iFrameID.height = "";
                iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
            }
        }

第一次加载myIframe.html

<button id="display_all">view more</button>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit....</div>

单击更多myIframe.html的视图后,内容将显示此

Lorem ipsum dolor sit amet, consectetur adipiscing elit morbi vel orci nisl. Sed sit amet maximus nulla. Nunc sit amet lectus non ante venenatis aliquam eget ut erat. Sed vitae gravida diam, ac pharetra magna. Nullam leo nibh, rhoncus eget arcu vel, hendrerit dapibus libero. Donec purus ligula, mollis quis erat a, aliquam pharetra tortor. 

Aenean et erat odio. Nullam vel diam felis. Phasellus a metus urna. Integer posuere, odio eget porta mollis, massa odio fringilla nibh, sed ultricies ipsum arcu vel risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 

Nullam condimentum, sem vel scelerisque dignissim, metus ligula imperdiet nisl, quis aliquet ex felis sed risus. Morbi gravida ultrices risus, at tincidunt mauris venenatis eget. 

Aenean et erat odio. Nullam vel diam felis. Phasellus a metus urna. Integer posuere, odio eget porta mollis, massa odio fringilla nibh, sed ultricies ipsum arcu vel risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 

Nullam condimentum, sem vel scelerisque dignissim, metus ligula imperdiet nisl, quis aliquet ex felis sed risus. Morbi gravida ultrices risus, at tincidunt mauris venenatis eget. 

Aenean et erat odio. Nullam vel diam felis. Phasellus a metus urna. Integer posuere, odio eget porta mollis, massa odio fringilla nibh, sed ultricies ipsum arcu vel risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 

Nullam condimentum, sem vel scelerisque dignissim, metus ligula imperdiet nisl, quis aliquet ex felis sed risus. Morbi gravida ultrices risus, at tincidunt mauris venenatis eget. 

现在我的问题是这个,在第一次加载时高度正常(因为js iframeLoaded)没有显示垂直滚动,但是当我点击视图更多按钮(显示其他文本)时,会出现垂直滚动。 / p>

如果在点击iframe内的按钮(查看更多)时调整iframe的高度,以便删除垂直滚动?

顺便说一下,父和iframe在同一个网址中运行。

让我知道你有问题要说清楚。 任何帮助将不胜感激,我提前感谢您! :)

1 个答案:

答案 0 :(得分:0)

在iframe中:

$("display_all").click(function() {
    parent.$("body").trigger("eventName");
});

在包含体中

$("body").on("eventName", function() {
    $("#settings").height(yourHeightVal);
});