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 个答案: