Question

我有一个带有标准表单的.html，它位于iFrame中。填写表单，然后使用表单底部的提交按钮进行提交。生成的操作发生在窗体的顶部，在某些设备上，这意味着单击按钮时窗体的顶部不可见（在浏览器窗口的顶部）。

我有一个按钮的.click事件，在那个事件里面我有：

window.scrollTo(0,0);

在将表单放在iFrame中之前，此工作正常，但在iFrame中无效。

如何在iFrame中完成相同的操作？我需要滚动到页面顶部，而不只是滚动到iFrame的顶部。我也尝试了以下代码：

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

但它也不起作用。

HTML表单由domain1.com提供，iFrame位于domain2.com上的页面中。

DOMAIN1.COM/index.html：

<html>

    <script type="text/javascript">

    // EVENT Handler - Form Submission
    $(function () {
        $("#btnSubmit").bind('click', function (event) {
            ...code needed to scroll to top on DOMAIN2.COM...
        });
    });
    </script>

    <body>
        <form>
            <input type="submit" id="btnSubmit" value="Submit" />
        </form>
    </body>
</html>

DOMAIN2.COM/index.html：

<html>
    <body>
        <iframe src="http://domain1.com/index.html"></iframe>
    </body>
</html>

请不要因为缺少此代码的属性而批评我。我没有复制/粘贴，我只是快速输入，以便大致了解我想要完成的任务。我知道上面缺少必要的属性。 ; - ）

Answer 1

我认为您的iframe和您的主页位于同一个域中。

试试这个：

window.parent.scrollTo(0,0);

window.parent是主页面的窗口，而window是您当前的iframe窗口。

DEMO

如果您的iframe和您的窗口位于不同的域中，则无法像这样直接访问window.parent。您需要使用window.postMessage进行通信。

如果你使用jQuery，你可以尝试这个plugin。

这个想法是当点击iframe中的按钮时，iframe会将消息发布到父页面。将通知收听该事件的父页面并将其自身滚动到顶部。在您的情况下使用window.postMessage的示例代码（未测试）：

<强> DOMAIN1.COM/index.html：

$(function () {
     $("#btnSubmit").bind('click', function (event) {
            window.postMessage("scrollTop","http://domain2.com");
     });
});

<强> DOMAIN2.COM/index.html：

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  if (event.origin !== "http://domain1.com")
    return;

  if (event.data == "scrollTop"){
      window.scrollTo(0,0);
  }
}

Answer 2

我不确定但你必须使用： -

$(window).animate({scrollTop: $("body").offset().top}, 500);

而不是

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

Answer 3

尝试下面的

    window.parent.$("body").animate({scrollTop:0}, 'slow');

请记住，iframe和正文应该能够进行通信。意思是，它们都应该共享同一个域。说父母是abc.xyz.com iframe不能是abc1.xyz1.com。

jQuery - 当在iFrame内部单击按钮时移动到页面顶部

3 个答案: