jQuery/CSS-单击IFRAME内容内的按钮时更改IFRAME高度

jQuery/CSS - Change IFRAME Height when click on button inside the iframe content

本文关键字：IFRAME 高度 按钮 CSS- 单击 jQuery      更新时间：2023-09-26

我正在编写一个简单的HTML/jQuery脚本。现在，当我点击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>标记，其中我为元素outerdiv和iframe inerriframe添加了CSS，现在当我点击按钮时，它不会改变iframe的高度。

当我删除<style>....</style>标记和其中的所有内容时，脚本又开始工作了。

以下是演示：http://beta.sportsdirect.bg/test/这是我还没有添加<style></style>标签时的工作演示。

你能帮我为这些元素设置CSS并使jQuery脚本也能工作吗？

提前感谢！

当文档未完全加载到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>

当页面中的所有.css、.js和整个文档都准备就绪时，它可以侦听click事件。

我希望这会有所帮助？

相关文章：