Question

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

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

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

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

原因是因为某些内容较大，当他们点击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
    });

iFrame jQuery - 在加载新的iFrame内容时，父滚动到iFrame顶部

1 个答案: