Question

好的。我想尽力解释这个问题。

我正在开发一个网站，其网页上有一个iframe。 iframe显示另一个网页，其中包含自己的iframe。

iframe中的iframe会改变大小，尤其是高度。

如何在iframe中获取iframe，iframe显示iframe ...（Oye，令人困惑）一起更改高度？

基本上我的网页在iframe中有一个iframe，而iframe中的iframe是一个论坛页面。这意味着当人们发帖时，内部iframe会改变高度，因此需要扩展其包含的iframe。

男人只是问这个问题真让我困惑。

我已经获得谷歌和各种网站的评分，但我似乎无法获得能够满足我的需求或工作的代码。

由于

Answer 1

玩这个库来执行此操作，您需要设置中间页面以运行主机和iframe脚本，并且大小应该冒泡到最高级别。

https://github.com/davidjbradshaw/iframe-resizer

Answer 2

我知道这是一个老线程，但我想我会分享我的经验。我在工作项目上遇到了同样的问题。我到处搜索并尝试了很多不同的东西，但终于发现这个工作得很好（在这里的一些帖子的帮助下！）。到目前为止，我测试过FF 30，IE11和chrome。简而言之，我有一个父HTML页面，我可以放一个iframe。 iframe加载包含另一个iframe的aspx页面。最内层的iframe（child_page_2.aspx）有动态内容，我希望两个iframe都相应地调整大小。另外，要明确这些都在同一个域/主机名上。

我在内部最iframe（child_page_2.aspx）上使用数据列表进行分页。每次点击页码都会产生不同高度的动态内容，即通过分页数据。我发现在OnClick（）事件服务器端执行操作并使用ScriptManager触发客户端javascript将在内容加载后返回正确的高度。我没有显示所有DataList代码只是嵌套在ItemTemplate中的链接按钮之一。

我知道这是设置网页的一种非常糟糕的方式，这正是我们被迫做的事情，因为我们只能访问HTML父页面。嵌套iframe的原因是为我们提供了一种“菜单”页面，其中包含iframe下面的内容（child_page_1.aspx - ＆gt; child_page_2.aspx）。

希望这有助于某人！

父Page.HTML：

<iframe src=child_page_1.aspx id="mainFrame" />

child_page_1.aspx：

<head>
<script type="text/javascript">

    function adjustMyFrameHeight() {
          var frame = getElement("mainFrame");    
           frame.height = document.body.offsetHeight + 60 + "px";
    }
    function getElement(aID) {
        return (document.getElementById) ?
        parent.document.getElementById(aID) : parent.document.all[aID];
    }

    function updateframeheight(newheight) {
        var frame = document.getElementById("subFrame");
        frame.height = newheight + "px";
        adjustMyFrameHeight();

    }
</head>

<body onload="adjustMyFrameHeight();">

<iframe id="subFrame" src="child_page_2.aspx" >

</body>

child_page_2.aspx：

<head>
<script type="text/javascript">

    function adjustMyFrameHeight() {
           var frame = getElement("subFrame");
           frame.height = document.body.offsetHeight + 60 + "px";


    }
    function getElement(aID) {
        return (document.getElementById) ?
        parent.document.getElementById(aID) : parent.document.all[aID];

    }
    function updatesize() {
        parent.updateframeheight(document.body.offsetHeight + 60);

    }
</script>
</head>

<body  onload="adjustMyFrameHeight();">
<form>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate>

<asp:LinkButton ID="lnkbtnPrevious" runat="server" OnClick="lnkbtnPrevious_Click">Previous</asp:LinkButton>

</ContentTemplate>
</asp:UpdatePanel>

</form>

child_page_2.aspx.cs：

protected void lnkbtnPrevious_Click(object sender, EventArgs e)
    {

        ScriptManager.RegisterStartupScript(Page, typeof(Page), "updatesize", "updatesize();", true);
    }

调整在其中调整iframe的iframe的大小

2 个答案: