Javascript 单击Iframe'；内的按钮时如何更改Iframe高度；内容

现在我想做一个简单的jQuery函数，当这个函数被调用时，iframe高度会发生变化

这是我的密码：

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
 function ChangeHeightF1() 
 {
    $("#inneriframe").css({"height":"350px;"});
    alert('The height was changed!');

 }
</script>
<div id="outerdiv">
    <iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="inneriframe" scrolling="no" target="_parent"></iframe>
</div>

函数ChangeHeightF1（）
{
$（“#inneriframe”）.css（{“height”：“350px；”}）；
警报（“高度已更改！”）；
}

以下是iframe内容中的按钮代码：

<button type="button" onclick="parent.ChangeHeightF1();">Click me to change Height!</button>

单击我更改高度！

所以我的问题是，如何在保存iframe的内容中单击按钮来更改iframe的高度

还有，我必须在“outerdiv”div元素上放置什么CSS，这样当iframe高度发生变化时，它也会改变容纳iframe的div的高度

---

提前谢谢

您可以在jQuery选择器中将window.parent.document用作上下文，然后操作CSS值

$(":button").click(function(){

    $('#inneriframe, #outerdiv', window.parent.document).css({"height":"350px"});

})

---

这应该行得通。如果你想重新调整尺寸回到以前的高度，请告诉我

http://jsfiddle.net/ko3pyy8c

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">

     $( document ).ready(function() {

        $('#more').click(function(){
            $('#inneriframe').animate({height:'500px'}, 500);
            $('#more').text('Go Back');
         });
    });

</script>

<style type = "text/css"/>
    #inneriframe {
         height: 350px;
        overflow: hidden;
    }
</style>

<div id="outerdiv">
    <iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="inneriframe" scrolling="no" target="_parent"></iframe>
</div>
<br/>
<a href="#" id="more">Change Height</a> 

$（文档）.ready（函数（）{
$（“#更多”）。单击（函数（）{
$（'#inneriframe'）。设置动画（{height:'500px'}，500）；
$（'更多'）.text（'返回'）；
});
});
#内框架{
高度：350px；
溢出：隐藏；
}

它可以帮助您

 <a href='#'>click me</a>
<div id="outerdiv">
<iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="inneriframe" scrolling="no" target="_parent"></iframe>

---

该按钮位于iframe内容中。它不像你建议的那样位于iframe的旁边。按钮位于iframe内容的内部。在您的示例中，您正在创建iframe旁边的另一个元素。该按钮必须位于iframe内容中，当单击以更改iframe的高度时。是否必须为iframe内容中的按钮添加ID？我能做到。我想在单击此按钮时更改保存它的iframe的高度。是的，您可以这样做，只需将选择器从$（“：button”）更改为$（“#yourbutonid”）。请记住，您必须在页面中包含此代码，该代码将加载到iFrame中。

    $('a').click(function(){
    $('iframe').css('height','600px');
});