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

Posted 2023-05-09

【中文标题】在 iframe 内单击按钮时，如何增加 iframe 的高度？

【英文标题】：How can i increase height of iframe when a button is clicked inside the iframe?

【发布时间】：2017-10-07 13:34:37

【问题描述】：

所以，我一直在开发一个 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 内按下按钮时增加高度，因此按下按钮时不会出现滚动条。 提前谢谢你。

【参考方案1】：

你可以用 jQuery 做到这一点：

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

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

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

将 '#button' 更改为要用于 iframe 调整大小的元素。

编辑：

$('#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
    

【讨论】：

我还遇到了一些其他问题。当我按下添加按钮时，会创建另一个名为“删除”的按钮。如何在此代码中也包含该按钮，从而降低 iframe 高度。跨度>

我想，我没有把问题说清楚。iframe 中的内容在第一次调用 Add 按钮后发生变化。创建了一个新按钮 Delete。（我现在已经包含问题中的截图）。因此， iframe.find("#delete").click(function()) 将不起作用，因为删除按钮不在 var iframe = $('#starwindow').contents( ).Add按钮被调用后如何包含Delete按钮？

@codewiz 我明白了，那么你必须运行 var iframe = $('#starwindow').contents();再次包括删除按钮

好的。感谢您的帮助。