iFrame 内的页面顶部 - 跨域答案

【问题标题】：Top of page from within iFrame - cross domainiFrame 内的页面顶部 - 跨域
【发布时间】：2014-01-23 00:00:34
【问题描述】：

希望我没有忽略 SO 上的解决方案，但我一直在努力找出我做错了什么，并希望有人能看到它是什么。这是配置：

我有一个在 DOMAIN1.COM 上提供的页面。大多数情况下是一个带有提交按钮和大量 jQuery 的表单。表单可能很长，因此用户需要向下滚动页面才能输入表单字段。提交按钮位于此表单的底部，而输出结果位于表单的顶部。当用户单击提交按钮时，他/她看不到结果，因为它们不在页面顶部。我想要做的是在单击提交按钮后使用 jQuery scrollTo() 定位到页面顶部。

问题是上面的页面（和提交按钮）位于 DOMAIN2.COM 上的 iFrame 中，因此当单击提交按钮时，我需要克服跨域情况。

我发布了一个问题here，但我的问题并不准确。该线程演变成有用的信息，并将我指向一个使用 jQuery postMessage() 跨域通信的script，但我在实现建议的解决方案时遇到了问题。这是我的代码：

DOMAIN1.COM（子）：

<html>
    <head>
        <!-- Load jquery -->
        <script type="text/javascript" src="./jquery-2.0.3.min.js"></script>

        <!-- Cross-domain scripting goodness (scroll to top) -->
        <script type="text/javascript" src="./jquery.ba-postmessage.js"></script>

        <script type="text/javascript">
            // EVENT Handler - Form Submission
            $(function () {
                $("#btnSubmit").bind('click', function (event) {
                    // Get the parent page URL as it was passed in, 
                    // for browsers that don't support window.postMessage
                    var parent_url = decodeURIComponent(document.location);
                    window.postMessage("scrollTop", parent_url, parent);
                });
            });
        </script>
    </head>

    <body>
        <form>
            ... Lots of form fields resulting in vertical height ...
            <input type="submit" id="btnSubmit" value="Submit" />
        </form>
    </body>
</html>

DOMAIN2.COM（父级）：

<html>
    <head>
        <!-- Load jquery -->
        <script type="text/javascript" src="./jquery-2.0.3.min.js"></script>

        <!-- Cross-domain scripting goodness (scroll to top) -->
        <script type="text/javascript" src="./jquery.ba-postmessage.js"></script>

        <script type="text/javascript">
            // Cross-domain - scroll window to top
            window.addEventListener("message", receiveMessage, false);

            function receiveMessage(event) {
                if (event.data == "scrollTop") {
                    window.scrollTo(0, 0);
                }
            }
        </script>
    </head>

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

在同一域上运行以上两个页面可提供所需的结果 - 单击提交会将页面滚动到顶部。

在上面记录和编码的不同域上运行，页面不会滚动到顶部，我的输出结果失败，并且 jQuery 在 Firebug 中输出此错误消息：

DataCloneError: The object could not be cloned.

如果我更改代码以省略 DOMAIN1.COM 页面中的 parent 参数，例如：

var parent_url = decodeURIComponent(document.location);
window.postMessage("scrollTop", parent_url);     //, parent);

然后什么都没有发生，也没有错误输出。似乎根本没有调用 DOMAIN2.COM 上的 receiveMessage()。

任何人都可以看到我可能做错了什么导致此代码无法跨域工作吗？

【问题讨论】：

这将是一项繁重的工作，而且它可能永远无法正常工作，只需将表单放在第一页并放下 iFrame，所有问题都解决了。
DOMAIN1.COM 上的页面访问同一域上的 ASP Web API。从这个意义上说，在同一个域上运行它们可以解决跨域问题。 DOMAIN2.COM 上的页面在 Wordpress 站点 - Linux/PHP 上运行。如果我将页面从 DOMAIN1.COM 移动到 DOMAIN2.COM，我当然可以克服这个特殊问题（已发布），但是我遇到了 ASP Web API 的跨域问题。我很早就尝试解决这个问题，但遇到了我无法弄清楚的问题。 :S

标签： javascript jquery iframe cross-domain

【解决方案1】：

我认为现在已经很晚了，但对其他人来说，它可能会起作用。

你快到了；你需要使用

window.postMessage("scrollTop","#domain of parent page exact page");

代替你的代码sn-p：

 window.postMessage("scrollTop", parent_url, parent);

如果在调度事件时调度其他窗口文档的方案、主机名或端口与 targetOrigin 中提供的不匹配，则 Dom 不会发送事件。在此处阅读documentation

在父页面中使用以下代码 sn-p。

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
  if (event.origin !== "#domain of iframe")
    return;
  if (event.data == "scrollTop"){
  window.scrollTo(0,0);
  }
}

【讨论】：