iFrame内的页面顶部 - 跨域

我希望我没有忽视这里的解决方案，但我一直在努力弄清楚我做错了什么，并希望有人能看到它是什么。以下是配置：iFrame内的页面顶部 - 跨域

我有一个页面在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.

如果我更改代码离开出parent参数在页面上DOMAIN1.COM这样的：

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

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

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

来源

2014-01-23 rwkiii

这将是很多工作，它可能永远不会正常工作，只需在第一页上包含表单并放下iFrame并解决所有问题。 – adeneo

DOMAIN1.COM上的页面访问同一个域上的ASP Web API。在同一个域中运行它们可以解决跨域问题。 DOMAIN2.COM上的页面在Wordpress站点上运行 - Linux/PHP。如果我将页面从DOMAIN1.COM移动到DOMAIN2.COM，我当然可以克服这个特殊问题（发布），但是我有一个ASP Web API的跨域问题。我尽早解决了这个问题，但遇到了我无法解决的问题。：S – rwkiii

我认为现在已经很晚了，但对于其他人来说，这可能会奏效。

你几乎在那里;您需要使用

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

而不是你的代码片断：

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

如果在活动时间内计划要出动方案，主机名或otherWindow的文件不符合所提供的端口在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); 
    } 
}

来源

2017-07-03 06:22:50 amitdeol

iFrame内的页面顶部 - 跨域

回答

相关问题