内部表单提交后调整 iframe 大小答案

【问题标题】：resize iframe after inner form submit内部表单提交后调整 iframe 大小
【发布时间】：2011-11-04 20:31:47
【问题描述】：

我在 iFrame 中有一个带有表单的页面。表格很长，所以 iframe 很长。提交表单后，表单消失，并且在内页顶部出现一条消息。但是，因为当用户提交时初始 iframe 太长了，除非他们向上滚动到顶部，否则看到一个几乎是白色的页面。

在提交表单（在 iframe 中）时，我需要能够转到 iframe 的顶部。成功提交后，我在成功代码中尝试了这个（通过 PHP 编写 jQuery）：

echo ("<script type=\"text/javascript\">\r\n");
echo ("$(document).ready(function() {\r\n");
echo ("$(\"html, body\").animate({ scrollTop: 0 }, \"slow\");\r\n");
echo ("});\r\n");
echo ("</script>\r\n");

但这没有用（没有做任何事情，Firebug 现在显示 JS 错误）

还尝试在 iframe 页面顶部设置这样的跨度：并在表单中使用#top 作为我的操作，但它也不起作用。

对于提交后进入 iframe 顶部或根据 iframe 内容“缩小”iframe 的大小有什么想法吗？

谢谢！克里斯

【问题讨论】：

标签： jquery iframe

【解决方案1】：

您只能为 css 属性设置动画，而 scrollTop 不是其中之一。我会这样做：

$(document).scrollTop(0);

我不确定是否有办法为滚动设置动画，我以前从未遇到过。

编辑：在这里实现动画滚动效果的最简单方法可能是对导致 iframe 如此长的元素的高度进行动画处理。像这样的：

$('#CONTAINING_EL_ID').animate({height: 20}, 'slow');

它会产生类似向上滚动的效果（尽管实际上内容只是变短了），直到所有内容都适合视图。

【讨论】：

我应该更清楚。如果它可以平滑向上滚动，那很好，但更重要的是我到达页面顶部，即使它没有滚动。周一试试这个。
星期一？？你有什么9-5？程序员从不睡觉！
这对我也不起作用。这应该在 iframed 页面还是父页面中？
还注意到我得到了这个：Permission denied to access property 'ownerDocument' ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js Line 16
您不能从 iframe 内访问 iframe 外元素的属性；这是一个安全问题。这包括 iframe 本身的属性，但不包括其子级。因此，要在 iframe 之外操作元素，您应该将代码放在 iframe 中。要操作父页面的 iframe 或元素，代码必须在父页面中。

【解决方案2】：

您可以从父页面对 iframe 本身设置加载回调：

$(document).ready(function() {
    $("#myIframe").load(function() {
        var iframe = $(this);

        iframe.animate(
            {height: iframe.contents().find("body").outerHeight(true)},
            "slow",
            "swing"
        );
    });
});

这将根据 iframe 中 <body> 的高度在每次 iframe 完成加载其内容时更改大小。请注意，这应该放在父页面的 docReady 中。

【讨论】：

星期一会试一试。
添加到父页面，没有运气： <?php echo $_SERVER['HTTP_HOST']; ?>/iframe_pages/advertise.php" width="100%" height="100%" frameborder="0" id="商家资料">