jQuery - 在iframe中的按钮的onclick事件中更改Iframe高度

现在我正在处理一个简单的HTML/jQuery脚本，在这里我想要更改iframe高度，当我单击加载的按钮时它自己的iframe。jQuery - 在iframe中的按钮的onclick事件中更改Iframe高度

看看我的代码：

的index.php：

<div id="outerdiv"> 
    <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> 
    <script type="text/javascript"> 
    $("#SuperWebF1").click(function(){ 

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

    }) 
    </script> 
<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>

这里是index.php文件的演示：http://beta.sportsdirect.bg/test/

当你打开它时，你会看到由iframe加载的按钮。当您点击按钮时，iframe不会改变高度！

为什么，有没有错误？

你能帮我做这件事吗？

提前致谢！

来源

2014-10-31 user2942786

您正尝试将click事件绑定到button元素，然后它存在。 – CBroe 2014-10-31 20:06:50

有没有什么办法可以将脚本放在iframe之外，并让它在该按钮上的iframe内单击有点击？ – user2942786 2014-10-31 21:31:52

您需要先获取iframe的内容，然后才能设置您的点击事件。试试这个吧 -

var iframeDoc = $('#inneriframe').contents().get(0); 
$(iframeDoc).on('click', 'SuperWebF1', function() { 
     ........... your code here ............. 
});

快乐编码!!!

来源

2014-10-31 20:10:41 Gjohn

以下是我对代码所做的一些更改。

//function call needed to make sure page is loaded before javascript runs 
$(document).ready(function(){//begin document ready function 

//on click event 
$(document).on("click","#SuperWebF1",function(){//begin on click event 

    //change the height of selected elements 
    $('#inneriframe, #outerdiv', window.parent.document).css({"height":"450px"}); 

    });//end on click event 


    });//end document ready function

来源

2014-10-31 20:18:57

有没有什么办法可以将脚本放在iframe之外，并让它在该按钮上的iframe中点击 – user2942786 2014-10-31 21:36:50

jQuery - 在iframe中的按钮的onclick事件中更改Iframe高度

回答

相关问题