如何在iframe内容中单击按钮时更改Iframe高度

Right now i want to make a simple jQuery function so when this function is called the iframe height is changing.

现在我想创建一个简单的jQuery函数，所以当调用这个函数时iframe的高度正在改变。

Here is my code:

这是我的代码：

<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>

Here is the code of the button which is in the content of the iframe:

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

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

So my questions is how it's possible to change the iframe height on button click inside the content which is holding the iframe.

所以我的问题是如何在按住iframe内容的按钮内部更改iframe高度。

Also what CSS i have to place on "outerdiv" div element so when the iframe height is changing it will change the height of the div holding the iframe as well ?

还有什么CSS我必须放在“outerdiv”div元素上，所以当iframe高度改变时，它会改变持有iframe的div的高度？

Thanks in advance!

提前致谢！

3 个解决方案

#1

You can use window.parent.document as a context in jQuery selector, and then manipulate CSS values.

您可以使用window.parent.document作为jQuery选择器中的上下文，然后操作CSS值。

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

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

})

#2

This should work. If you want to re size back to previous height, let me know.

这应该工作。如果你想重新调整到以前的高度，请告诉我。

http://jsfiddle.net/ko3pyy8c

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>

#3

it can help you

它可以帮助你

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

by using jquery

通过使用jquery

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

#1