在iframe中單擊按鈕時，如何增加iframe的高度？

Question

因此，我一直在一個wordpress網站上工作，該網站的網站網頁中有一個iframe。該iframe包含2個按鈕，這些按鈕使用jquery附加將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>

這是屏幕截圖。

我希望在iframe中按下按鈕時提高iframe的高度，所以在按下按鈕時沒有滾動條出現。 預先感謝您。

Answer 1

您可以使用jQuery來做到這一點：

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

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

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

通過要用於iframe調整大小的元素更改'#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
    }
}