跨域postMessage，识别iFrame

Question

我使用postMessage将事件从iframe发送到它的父文档。 我控制了双方，但内容来自两个不同的领域。

在此输入图像描述

我的简单问题是，我无法识别其内部回调方法中的iFrame。 实现如下：

在iFrame中：

parent.postMessage(JSON.stringify({action: "closeView" }),'*');

在父窗口中：

window.addEventListener('message',function(event) {
if(event.origin !== 'https://example.com')
    return;

    // Parse message back to json
    var messageObject = JSON.parse(event.data);
    var source = event.source;
    /* this is returning: Window -URL- */
    console.log( source );
    /* This will throw Permission denied, although this code is inside of "parent" */
    console.log(source.parentNode);
},false);

我想识别iframe的某个父元素，它在（逻辑上）在父文档中。

当我尝试在所述对象上使用event.source.parentNode或一些jQuery时，Firefox说，我不能这样做以防止XSS，错误： Error: Permission denied to access property 'parentNode'

如何获取触发postMessage事件侦听器的iFrame的父元素？

Answer 1

您可以使用窗口名称，因为它们从iframe标记传递到iframe上下文。

父文件：

<iframe name=fr2 src="data:text/html,%3Chtml%3E%0A%20%3Cscript%3E%20parent.postMessage%28%7Bname%3A%20window.name%7D%2C%20%22*%22%29%3B%3C/script%3E%0A%3C/html%3E"></iframe>
<iframe name=fr3 src="data:text/html,%3Chtml%3E%0A%20%3Cscript%3E%20parent.postMessage%28%7Bname%3A%20name%7D%2C%20%22*%22%29%3B%3C/script%3E%0A%3C/html%3E"></iframe>

<script>onmessage = function(e){ // use real event handlers in production
       alert("from frame: " + e.data.name);
 };</script>

iframe doc：

<html>
 <script> parent.postMessage({name: name}, "*");</script>
</html>

提醒“fr2”，然后“fr3”。 然后，您可以使用attrib CSS选择器轻松使用名称 attrib在父DOM中查找iframe。

window.name + iframe概念的说明性演示： http ： //pagedemos.com/namingframes/

这种痛苦的简单方法也不受同一网址iframe引起的问题的影响。

Answer 2

根据我的理解，这可能是尝试这里假设您的主窗口的URL是www.abc.com \\ home.php

  <body>
         <iframe src="www.abc.com\getOtherDomainContent.php?otherUrl=www.xyz.com"/>
    </body>

此文件中的getOtherDomainContent.php需要编写一个获取交叉URL内容的ajax调用，并将该内容推送到当前iframe窗口（getOtherDomainContent.php）的正文部分。

getOtherDomainContent.php代码：

    <html>
         <head>
//import jqry lib or other you use.
          <script>
              $(document).ready({
               //getcontent of xyz.com
                var otherUrlContent=getAjaxHtml("www.xyz.com");
                 $("body").html(otherUrlContent);
                  // further  code after content pushed.
                  //you can easily access "parent.document" and else using parent which will give you all thing you want to do with your main window
                });
          </script>
         </head>
    </html>

Answer 3

就像在这个帖子中看到的那样： postMessage Source IFrame可以将每个iframes contentWindow与event.source进行比较，如下所示：

/*each(iframe...){ */
frames[i].contentWindow === event.source

提示：当涉及到跨域使用和iFrame时，您无法访问iFrame中iFrame的id或name属性，因此我们无法获取这些属性。

但我不太喜欢这个。 我现在的解决方案如下所示：

在iFrame中：

parent.postMessage(JSON.stringify({action: "closeView", viewUrl: document.URL}),'*');

更新：当您使用查询或带位置的链接（#anchor）时， docuent.URL可能会成为问题，因为您当前的网址将与iframe网格中的网址不同。 所以代替document.URL最好使用[location.protocol, '//', location.host, location.pathname].join('') （是否有任何方法在java脚本中获取没有查询字符串的url ）

在父文档中：

window.addEventListener('message',function(event) {

    if(event.origin !== 'https://example.com')
        return;

    // Parse message back to json
    var messageObject = JSON.parse(event.data);
    // Get event triggering iFrame
    var triggerFrame = $('iframe[src="'+messageObject.viewUrl+'"]');

 },false);

每个事件都必须将当前的iFrame URL发送到父文档。 我们现在可以使用给定的URL扫描iFrame的文档并使用它。

如果你们中的一些人知道更好的方式，请发表你的答案。

跨域postMessage，识别iFrame

问题描述

3 个解决方案

解决方案1
18 已采纳 2015-05-20 20:03:59

解决方案2
5 2015-05-19 13:13:23

解决方案3
2 2014-05-13 11:37:20

跨域postMessage，识别iFrame

问题描述

3 个解决方案

解决方案1 18 已采纳 2015-05-20 20:03:59

解决方案2 5 2015-05-19 13:13:23

解决方案3 2 2014-05-13 11:37:20

解决方案1
18 已采纳 2015-05-20 20:03:59

解决方案2
5 2015-05-19 13:13:23

解决方案3
2 2014-05-13 11:37:20