jQuery - Change Iframe height in the onclick event of a button inside the iframe
Question
Right now i am working on a simple HTML/jQuery script where i want to change the iframe height when i'm clicking on a button which is loaded by the iframe it self.
Take a look at my code:
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>
Here is a demo of the index.php: http://beta.sportsdirect.bg/test/
When you open it you'll see the button which is loaded by the iframe. When you click the button the iframe is not changing height!
Why, is there a mistake?
Can you help me make this thing work ?
Thanks in advance!
2 answers
solution1
4 2014-10-31 20:18:57
Here are some changes I made to your code.
//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
solution2
0 2014-10-31 20:10:41
You need to get the contents of your iframe before you can setup your click event. Try this -
var iframeDoc = $('#inneriframe').contents().get(0);
$(iframeDoc).on('click', 'SuperWebF1', function() {
........... your code here .............
});
Happy Coding!!!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.