How can i increase height of iframe when a button is clicked inside the iframe?

So,i have been working on a wordpress website which has an iframe in a webpage of the website.The iframe contains 2 buttons which uses jquery append to include content in the iframe.Currently i included a javascript function to change the height everytime the iframe is loaded.But i want to change the height when the button inside iframe is pressed.
The iframe is defined inside a plugin file in wordpress and iframe src is defined as a template in wordpress theme folder.
Plugin file containing iframe tag,

<iframe src="http://localhost/mysite/firstrate/" frameborder="0" 
scrolling="no" onload="resizeIframe();" id="starwindow" ></iframe>
var obj=document.getElementById("starwindow");
function resizeIframe() { = obj.contentWindow.document.body.scrollHeight + 'px';

Theme file containing iframe src(template file),

<button class="add_form_field" ><span>ADD</span></button>
<button id="button" class="submit_button"> SUBMIT </button>
<input type="radio" class="rating1" id="1star5" name="rating1" value="5" />
<label for="1star5" title="Five Stars">5 stars</label>
<input type="radio" class="rating1" id="1star4" name="rating1" value="4" />
<label for="1star4" title="Four Stars">4 stars</label>
<input type="radio" class="rating1" id="1star3" name="rating1" value="3" />
<label for="1star3" title="Three Stars">3 stars</label>
<input type="radio" class="rating1" id="1star2" name="rating1" value="2" />
<label for="1star2" title="Two Stars">2 stars</label>
<input type="radio" class="rating1" id="1star1" name="rating1" value="1" />
<label for="1star1" title="One Star">1 star</label>

This is the screenshot.

I want the iframe to increase the height when buttons are pressed inside the iframe,so no scrollbar appears when buttons are pressed.
Thanking you in advance.

Read more here: How can i increase height of iframe when a button is clicked inside the iframe?

Leave a Reply

Your email address will not be published. Required fields are marked *