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

【问题标题】：jQuery - Move to top of page when button clicked inside of an iFramejQuery - 在 iFrame 内单击按钮时移动到页面顶部
【发布时间】：2014-01-18 02:17:42
【问题描述】：

我有一个标准格式的 .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>

请不要批评我此代码缺少属性。我不是在复制/粘贴，我只是快速输入它以大致了解我要完成的工作。我知道上面缺少一些基本属性。 ;-)

【问题讨论】：

你能用小提琴重新创建这个或发布一些代码吗？
jmore009，我编辑了我的问题以更准确地反映我需要做什么。我认为Khanh让我指出了正确的方向。很抱歉我最初的问题不完整。

标签： jquery html iframe

【解决方案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);
  }
}

【讨论】：

Khanh，您的建议似乎应该有效 - 但它没有。它可以在没有 iframe 的情况下工作，但当表单位于 iframe 中时则不行。您提出了一个可能的问题，涉及 2 个域。我将编辑/更新我的问题以提供更多信息。
@rwkiii：我添加了更多信息来处理跨域场景。
你让我很担心。我确实使用 jQuery。此应用程序与 Firefox、Safari、Chrome、桌面上的 IE、iPhone、iPad 等 iOS 上的 Safari 和使用 Chrome 的 Android 兼容。您引用的插件似乎与所有这些都不兼容。我没有考虑这个问题。顺便说一句，plnkr.co 对我来说是新的，我不明白它是如何工作的 - 或者它如何证明我的问题，因为没有提交按钮。 :S
@rwkiii：您可以按照我发布的链接中的示例进行操作。应该没那么难。
大声笑，好的，我相信你，并仔细研究它们。谢谢你。 +1

【解决方案2】：

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

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

而不是

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

【讨论】：

我编辑了我的问题，因为 Khanh 提出了一个重要的考虑因素，即涉及 2 个域。
h2O，+1 因为我认为您正确回答了我的问题，只是我遗漏了关键信息，这是我的错。谢谢。

【解决方案3】：

试试下面的

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

请记住，iframe 和 body 应该能够通信。意思是，他们都应该共享同一个域。说父级是 abc.xyz.com iframe 不能是 abc1.xyz1.com。

【讨论】：

不幸的是，我确实有跨域的考虑。谢谢。