Question

我希望我没有在这里忽略一个解决方案，但我一直在努力弄清楚我做错了什么，并希望有人能看出它是什么。这是配置：

我有一个在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()根本没有被调用。

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

Answer 1

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

你快到了;你需要使用

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

而不是您的代码段：

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

如果在安排调度事件时，其他Windows文档的方案，主机名或端口与targetOrigin中提供的方案，主机名或端口不匹配，则Dom不会发送该事件。在这里阅读documentation

在父页面中使用以下代码段。

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

iFrame中的页面顶部 - 跨域

1 个答案: