iFrame中的页面顶部-跨域

Question

Am hoping I haven't overlooked a solution here on SO, but I have been pulling my hair out trying to figure out what I am doing wrong and hoping somebody can see what it is. 希望我没有在SO上忽略一个解决方案，但是我一直在努力寻找原因，以弄清我做错了什么，希望有人能看到它是什么。 Here is the configuration: 配置如下：

I have a page that is served on DOMAIN1.COM. 我有一个在DOMAIN1.COM上提供的页面。 For the most part is is a form with a submit button and lots of jQuery. 大部分情况是带有提交按钮和许多jQuery的表单。 The form can be lengthy and so a user needs to scroll down the page to input form fields. 表单可能很长，因此用户需要向下滚动页面以输入表单字段。 The submit button is at the bottom of this form while the output results are at the top of the form. 提交按钮位于此表单的底部，而输出结果位于该表单的顶部。 When the user clicks the submit button he/she cannot see the results because they are off of the top of the page. 用户单击“提交”按钮时，他/她看不到结果，因为它们不在页面顶部。 What I want to do is use jQuery scrollTo() to position to the top of the page once the submit button is clicked. 我想做的是一旦单击提交按钮，就使用jQuery scrollTo（）定位到页面顶部。

The problem is that the page above (and submit button) is within an iFrame on DOMAIN2.COM and so when the submit button is clicked I have a cross domain situation that I need to overcome. 问题在于上面的页面（和“提交”按钮）位于DOMAIN2.COM上的iFrame中，因此，当单击“提交”按钮时，我遇到了跨域的情况，需要克服。

I posted a question here , but my question wasn't really accurate. 我在这里发布了一个问题，但是我的问题并不是很准确。 The thread evolved into helpful information and pointed me to a script that uses jQuery postMessage() to communicate cross domain, but I am having a problem implementing the proposed solution. 该线程演变成有用的信息，并向我指出了一个使用jQuery postMessage（）进行跨域通信的脚本，但是在实现所提出的解决方案时遇到了问题。 Here's my code: 这是我的代码：

DOMAIN1.COM (child): 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 (parent): 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>

Running both pages above on the same domain provides the desired results - clicking submit scrolls the page to the top. 在同一域上同时运行以上两个页面可提供所需的结果-单击“提交”会将页面滚动到顶部。

Running on separate domains as documented and coded above, the page does not scroll to top, my output results fail, and jQuery outputs this error message in Firebug: 如以上记录和编码所示，在单独的域上运行，页面无法滚动到顶部，我的输出结果失败，并且jQuery在Firebug中输出以下错误消息：

DataCloneError: The object could not be cloned.

If I change the code to leave out the parent parameter in the page on DOMAIN1.COM like: 如果我更改代码以在DOMAIN1.COM的页面上忽略parent参数，例如：

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

Then nothing happens at all and no errors are output. 然后，什么也不会发生，也不会输出错误。 It does not appear that receiveMessage() on DOMAIN2.COM gets called at all. 似乎完全没有调用DOMAIN2.COM上的receiveMessage() 。

Can anyone see what I might be doing wrong that prevents this code from working cross domain? 谁能看到我可能做错了什么，导致该代码无法跨域工作？

Answer 1

I think it very late now but for others, it may work. 我认为现在已经很晚了，但是对于其他人来说，它可能会起作用。

You are almost there; 你快到了； You need to use 您需要使用

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

Instead of your code snippet: 代替您的代码片段：

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

If at the time the event is scheduled to be dispatched the scheme, hostname, or port of otherWindow's document does not match that provided in targetOrigin, the event will not be sent by Dom. 如果在计划分派事件时，otherWindow文档的方案，主机名或端口与targetOrigin中提供的不匹配，则Dom将不会发送事件。 Read documentation here 在此处阅读文档

In Parent Page use following code snippet. 在“父页面”中，使用以下代码段。

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 个解决方案

解决方案1
1 已采纳 2017-07-03 06:22:50

iFrame中的页面顶部-跨域

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-07-03 06:22:50

解决方案1
1 已采纳 2017-07-03 06:22:50