使用 ModalPopupextender 作为弹出窗口打开时调整 iframe 高度的问题

Posted 2023-03-06

【中文标题】使用 ModalPopupextender 作为弹出窗口打开时调整 iframe 高度的问题

【英文标题】：Issue adjusting iframe height when opened as popup using ModalPopupextender

【发布时间】：2012-05-12 14:40:32

【问题描述】：

我正在使用 ModalPopupextender Ajax 控件在模态弹出窗口中打开 aspx 页面。 aspx 页面在 iframe 中打开，如下面的代码所示。在 iframe 中加载的内容是动态的，因此我无法为 iframe 提供固定高度。我希望每次打开弹出窗口时我都应该能够根据内容调整高度。我有一个调整 iframe 高度大小的功能，我在我的其他页面上成功使用了该功能，其中 iframe 在窗口本身中填充，但在弹出窗口中打开 iframe 时无法调整高度。我已经尝试过window onload，iframe onload事件，但都没有成功。

     <asp:ModalPopupExtender ID="ModalPopupExtender2" BackgroundCssClass="transparentBG"
        runat="server" CancelControlID="ButtonCancel" OkControlID="ButtonDone" 
        TargetControlID="btnAddNew" PopupControlID="DivAddWindow" Drag="true"  >
     </asp:ModalPopupExtender>
     <div class="popup_Buttons" style="display: none">
      <input id="ButtonDone" value="Done" type="button" />
      <input id="ButtonCancel" value="Cancel" type="button" />
     </div>
     <div id="DivAddWindow" style="display: none;">

     <iframe id="IframeEdit" scrolling="no" src="MasterPage.aspx"  >
    </iframe>
   </div>

如果有人能指导我解决这个问题，我将不胜感激。

【参考方案1】：

试试这个：

 <iframe id="IframeEdit" onload="iframeLoaded()" scrolling="yes" src="MasterPage.aspx"  >
</iframe>

以下 javascript 函数将从 iframe 内容中获取高度。

<script type="text/javascript">
function iframeLoaded() 
    var iFrameID = document.getElementById('IframeEdit');

    if (iFrameID) 
        iFrameID.height = "";
        iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
    

</script>  

我什至在 ModalPopupextender 中检查过它，它可以工作。

【讨论】：

感谢您的指导。设置 scrolling =yes 确实解决了高度问题，但在 Firefox 中，iframe 显示水平/垂直滚动。可能我需要找到一种通过 CSS 隐藏这些的方法。