iFrame jQuery - 加载新 iFrame 内容时父级滚动到 iFrame 顶部

Question

这是我在加载到父页面的 iFrame 中加载的脚本。

问题： 我希望它在每次点击指定时滚动到 iframe 的顶部 iFrame 中的内容，同时具有 iFrame 更改页面的内容。

（例如我点击iFrame中的提交按钮，在iFrame中加载新内容。同时父页面滚动到iFrame顶部）

我已经给 iFrame 一个 id 'iFrame'。当我单击 iFrame 中名为“imageField”的元素时，它将提交一个表单并在 iframe 中加载新内容。但我也希望它在加载 iframe 的主页上滚动到 iFame 的顶部。

原因是因为某些内容较大，当他们从 iFrame 中较大的内容点击提交时，它会转到较小的内容，看起来屏幕是空白的，因为他们必须滚动完成主页才能看到内容.因此，我希望托管 iFrame 的主页在加载新 iFrame 内容时滚动到 iFrame 的顶部。

这是 iFrame 中的代码：

<script>
    $(document).ready(function (){

        $("#imageField").click(function (){

                $('html, body').animate(
                    {
                    scrollTop: $("#iFrame").offset().top
                     }, 2000);

        });
    });
</script>

我的 iFrame 代码：

<iframe src="questions/questions.php" name="inlineframe" width="550"
marginwidth="5"  height="1500" marginheight="5" scrolling="auto" 
frameborder="0" id="iFrame" ></iframe>

Answer 1

试试这个：

在主页面，放置一个javascript函数：

// This is main page
<script type="text/javascript">        
    function scrollFrame(position) {
        position += $('#myFrameID').offset().top;
        $('body').animate({ scrollTop: position }, 1000);
    }
</script>

在 iframe 内的子页面上，将 javascript 更改为

    $("#imageField").click(function () {
        if (window != window.top) // the page is inside iframe
            window.top.scrollFrame(0); // change the position if any. 0 is top
    });