1

好吧。我想尽我所能解释这一点。

我正在一个网站上工作，该网站上有一个带有 iframe 的网页。iframe 显示另一个网页，其中包含它自己的 iframe。

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

如何让 iframe 中的 iframe 和显示 iframe 的 iframe...（Oye，令人困惑）一起改变高度？

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

只是问这个问题的人真的让我感到困惑。

我已经对谷歌和各种网站进行了评分，但我似乎无法获得可以满足我想要或为此工作的代码。

谢谢

4

2 回答 2

0

尝试使用这个库来执行此操作，您需要将中间页面设置为同时运行主机和 iframe 脚本，并且大小应该上升到您的顶层。

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

于 2014-02-02T20:40:21.223 回答
0

我知道这是一个旧线程，但我想我会分享我的经验。我在工作中的一个项目上遇到了几乎相同的问题。我到处搜索并尝试了很多不同的东西，但最后发现它工作得很好（在这里的一些帖子的帮助下！）。到目前为止，我使用 FF 30、IE11 和 chrome 进行了测试。简而言之，我有一个可以放置 iframe 的父 HTML 页面。该 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 --> child_page_2.aspx）。

希望这对某人有帮助！

父页面.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);
    }
于 2014-11-21T18:32:53.437 回答