Question

我正在研究一个简单的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脚本也能正常工作吗？

提前致谢！

Answer 1

当文档未在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事件。

我希望这会有所帮助吗？

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

1 个答案: