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

Question

现在，我正在开发一个简单的HTML / jQuery脚本，当我单击由iframe自身加载的按钮时，我想更改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不会改变高度！

为什么会出错？

你能帮我使这件事起作用吗？

提前致谢！

Answer 1

这是我对您的代码所做的一些更改。

//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

Answer 2

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

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

快乐编码！

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

问题描述

2 个解决方案

解决方案1
4 2014-10-31 20:18:57

解决方案2
0 2014-10-31 20:10:41

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

问题描述

2 个解决方案

解决方案1 4 2014-10-31 20:18:57

解决方案2 0 2014-10-31 20:10:41

解决方案1
4 2014-10-31 20:18:57

解决方案2
0 2014-10-31 20:10:41