jQuery/CSS - 當點擊iframe內容中的按鈕時更改IFRAME高度

我正在研究一個簡單的HTML/jQuery腳本。現在，當我點擊iframe內的按鈕時，它正在改變iframe的高度，用按鈕調用內容。jQuery/CSS - 當點擊iframe內容中的按鈕時更改IFRAME高度

看看代碼：

<div id="outerdiv" style="padding:20px;border:2px solid red;"> 
    <iframe src="http://beta.sportsdirect.bg/test/iframe.php" id="inneriframe" scrolling="no" target="_parent"></iframe> 
</div>

這裏是iframe.php內容：

<HTML> 
<head> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<div style="display:block;height:300px;"> 
    <h3>The iframe content</h3> 
     <button type="button" id="SuperWebF1">Click me to resize the holding Iframe!</button> 
    </div> 
    <script type="text/javascript"> 
    $("#SuperWebF1").click(function(){ 
     $('#inneriframe', window.parent.document).animate({height:'900px'}, 500); 

    }) 
    </script>

的問題來了，當我嘗試補充一點：

<style> 
#outerdiv 
{ 
    width:400px; 
    height:300px; 
    overflow:hidden; 
    position:relative; 
    border:2px solid #fff; 
} 

#inneriframe 
{ 
    position:absolute; 
    width:400px; 
    height:700px; 
    border:0px; 
} 
</style> 

<div id="outerdiv" style="padding:20px;border:2px solid red;"> 
    <iframe src="http://beta.sportsdirect.bg/test/iframe.php" id="inneriframe" scrolling="no" target="_parent"></iframe> 
</div>

正如你所看到的我已經添加了一個<style>標籤，我在其中添加了CSS元素outerdiv和iframe inerriframe，現在當我點擊按鈕時，它不會改變iframe的高度。

當我刪除<style>....</style>標籤及其中的所有內容時，腳本開始重新工作。

這裏是演示：http://beta.sportsdirect.bg/test/ 這是工作演示，當我還沒有添加<style></style>標籤。

你能幫我設置這些元素的CSS，並使jQuery腳本也能工作嗎？

在此先感謝！

來源

2014-10-31 user2942786

當文檔未在iframe頁面內完全加載時，事件將不會觸發它的功能。

相反的：

<script type="text/javascript"> 
$("#SuperWebF1").click(function(){ 
    $('#inneriframe', window.parent.document).animate({height:'900px'}, 500); 

}); 
</script>

用途：

<script type="text/javascript"> 
$(document).ready(function(){ 
$("#SuperWebF1").on('click',function(){ 
    $('#inneriframe', window.parent.document).animate({height:'900px'}, 500); 

}); 
}); 
</script>

對於它聽click事件時，所有頁面的.css，.js和整個文件都完全準備好了。

我希望這會有幫助嗎？

來源

2014-11-01 00:40:28

jQuery/CSS - 當點擊iframe內容中的按鈕時更改IFRAME高度

回答

相關問題