如何在iframe內容中單擊按鈕時更改iframe高度

現在我想製作一個簡單的jQuery函數，因此當調用此函數時，iframe高度正在改變。如何在iframe內容中單擊按鈕時更改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的高度？

提前致謝！

來源

2014-10-29 user2942786

您可以使用window.parent.document作爲jQuery選擇器中的上下文，然後處理CSS值。

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

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

})

來源

2014-10-29 16:46:23 mgibala

我是不是要ASING ID的按鈕裏面的內容IFRAME？我可以做到這一點。我想要點擊這個按鈕來改變持有它的iframe的高度。 – user2942786 2014-10-29 17:37:07

是的，您可以做到這一點，只需將選擇器從$（「：button」）更改爲$（「＃yourButtonID」）即可。請記住，您必須在頁面中包含此代碼，該頁面將在iFrame中加載。 – mgibala 2014-10-29 22:01:05

這應該有效。如果你想重新回到之前的身高，請告訴我。

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>

來源

2014-10-29 16:56:15

該按鈕位於iframe內容中。在你的例子中，你正在創建iframe旁邊的另一個元素。該按鈕必須位於iframe內容中，並且單擊該按鈕以更改iframe的高度。 – user2942786 2014-10-29 17:32:48

它可以幫助你

<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'); 
});

來源

2014-10-29 17:03:55 user3078111

該按鈕位於iframe內容中。它不像你所建議的那樣位於iframe旁邊。 – user2942786 2014-10-29 17:31:27

如何在iframe內容中單擊按鈕時更改iframe高度

回答

相關問題