如何在iframe内单击按钮时增加iframe的高度？

Question

所以，我一直在一个WordPress网站上有一个iframe在网页的网页。iframe包含2个按钮，它使用jquery append将内容包含在iframe中。目前我包含一个javascript函数来每次更改高度iframe被加载了。但是我想在按下iframe内的按钮时改变高度。 iframe在wordpress中的插件文件中定义，iframe src在wordpress主题文件夹中定义为模板。包含iframe标签 插件文件，

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

主题文件，其中包含IFRAME SRC（模板文件），

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

我想iframe来增加高度时内按下按钮iframe，所以按下按钮时不会出现滚动条。 提前感谢您。

Answer 1

你可以做到这一点与jQuery的：通过您要使用的iframe调整大小的元素

$('#starwindow').load(function(){ 

     var iframe = $('#starwindow').contents(); 

     iframe.find("#button").click(function(){ 
       resizeIframe(); 
     }); 
}); 

变化'#button'。

编辑：

$('#starwindow').load(function(){ 
    var iframe = $('#starwindow').contents(); 
    iframe.find("#add").click(function(){ 
     resizeIframe('add'); 
    }); 
    iframe.find("#delete").click(function(){ 
     resizeIframe('delete'); 
    }); 
}); 

，改变你的函数中添加/删除高度

resizeIframe(mode) { 
    if(mode=='add') { 
     //code to add height 
    } 
    else { 
     //code to delete height 
    } 
}