javascript - 如何更新iframe的高度？

Question

如何更新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>

父节点

        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>

点击view more ing 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)没有显示垂直滚动，但是当我单击查看更多按钮(显示其他文本)时出现垂直滚动。

如何在点击iframe内的按钮(查看更多)后调整iframe的高度，从而消除垂直滚动？

顺便说一句，父级和 iframe 在同一个 url 中运行。

让我知道你有什么问题可以让它更清楚。任何帮助将不胜感激，我提前感谢您! :)

Answer 1

在 iframe 中:

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

在容器中

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