Question

现在我想创建一个简单的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>

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

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

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

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

提前致谢！

Answer 1

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

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

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

})

Answer 2

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

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>

Answer 3

它可以帮到你

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

使用jquery

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

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

3 个答案: