自动调整 iframe 高度答案

【问题标题】：resize automatically iframe height自动调整 iframe 高度
【发布时间】：2018-02-21 15:35:13
【问题描述】：

我在母版页中包含一个 iframe，我想根据里面的内容调整 iframe 的高度。

当 iframe 内容增加时，iframe 高度应该增加。

<div id="div_NotificationOuter" style="position: fixed; bottom: 0px; right: 15px;
            padding: 5px; background-color: White; background-image: url('../images/content_fixed_downup.png');
            background-repeat: no-repeat; min-height: 130px; text-align: left; display: block;
            border: 1px solid gray; width: 280px; overflow: hidden;">

    <asp:ImageButton ID="img1b" runat="server" ImageUrl="../images/close.png" 
                Style="margin-right: 2px;float:right;" OnClientClick="Hide_NotifyPopUp()" />

警报

您的浏览器不支持 iframe。

和 iframe 页面是

<div id="iframe_content">
        <div style="overflow: auto;font-weight:bold " >
            <label id="lblNotifyMessage" runat="server" style="margin-left:15px;">

            </label>
        </div>
        <div style="font-size: 14px;margin-left:15px;">
            <asp:Label ID="lblCount_Followups" runat="server" Text=""
                Style="margin: 2px"></asp:Label><br />
            <asp:Label ID="lblCount_Workflow" runat="server" Text="" 
                Style="margin: 2px"></asp:Label><br />
            <asp:Label ID="lblCount_Inbox" runat="server" Text=""
                Style="margin: 2px"></asp:Label><br />
            <asp:Timer ID="Timer1" runat="server" Interval="111115000">
            </asp:Timer>

            <asp:Label ID="Label1" runat="server" Text="Notification Message"
                Style="margin: 2px"></asp:Label><br />
            <asp:Label ID="Label2" runat="server" Text="Notification Message"
                Style="margin: 2px"></asp:Label><br />
            <asp:Label ID="Label3" runat="server" Text="Notification Message"
                Style="margin: 2px"></asp:Label><br />


            <asp:Label ID="Label4" runat="server" Text="Notification Message"
                Style="margin: 2px"></asp:Label><br />
            <asp:Label ID="Label5" runat="server" Text="Notification Message"
                Style="margin: 2px"></asp:Label><br />
            <asp:Label ID="Label6" runat="server" Text="Notification Message"
                Style="margin: 2px"></asp:Label><br />


            <asp:Label ID="Label7" runat="server" Text="Notification Message"
                Style="margin: 2px"></asp:Label><br />
            <asp:Label ID="Label8" runat="server" Text="Notification Message"
                Style="margin: 2px"></asp:Label><br />
            <asp:Label ID="Label9" runat="server" Text="Notification Message"
                Style="margin: 2px"></asp:Label><br />

        </div>
        </div>

【问题讨论】：

标签： jquery asp.net

【解决方案1】：

假设您有 jQuery，并且您知道内容高度何时发生变化，您可以使用以下方法调整它的大小：

$('#iframe').height($('#iframe_content').height());

【讨论】：

我为什么要使用这个功能

【解决方案2】：

您必须从 iframe 调用父页面上的函数才能执行此操作。

在父页面上，创建类似这样的函数

function resizeIframe(var) {
    $("iframeid").height(var);
}

现在，从 iframe 内部调用以下 sn-p

$(window).load(function() { 
// ^ Once everything load. You can change this any event suitable
    parent.resizeIframe($(window).outerHeight());
});

【讨论】：