Question

我在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大小的想法吗？

谢谢！克里斯

Answer 1

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

$(document).scrollTop(0);

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

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

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

它会产生类似的效果，似乎向上滚动（尽管内容确实变得越来越短），直到它都适合视图。

Answer 2

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

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

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

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

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

2 个答案: