jquery - 更改 iframe 高度以适应动画内容

Question

我在 iframe 中有一些内容，但是点击时的内容会通过动画改变高度。我需要更改 iframe 的高度以匹配新的动画高度，这将如何完成？

http://www.klossal.com/b_iframe.html

您可以看到那里的设置不起作用，您单击其中一个名称，您将看到动画。

Answer 1

您可以使用JS从父文档中获取函数，只需在父节点中定义一个函数并像这样调用它；

parent.setIFrameHeight(newValue);

你的setIFrameHeight功能应该是这样的；

function setIFrameHeight(value) {
   document.getElementById("iframe").height = value + "px";
}

Answer 2

您可以使用jQuery库来做到这一点，甚至可以轻松地为事件设置动画。

一个简单的 jQuery 示例示例：

HTML：

<iframe id="iframe-box" src="httml://jsfiddle.com" height="100px" width="50px"></iframe>   

<div id="clickme" >
  click me
</div>​

Javascript

$(function(){
    $('#clickme').click(function(){
      $('#iframe-box').animate({'width':'200'})  
    })
});​

例子

更新

如果你想访问 iframe 中的内容，你也可以使用 jQuery 和content()函数：

jQueryObject = $("#iframe-box").contents().find("#somecontent")