给定一个iframe的窗口，是否可以轻松访问拥有的iframe？

我一直在玩弄的postMessage只是为了有一个更好的理解它是如何工作的，通过下面的例子：给定一个iframe的窗口，是否可以轻松访问拥有的iframe？

http://hashcollision.org/tmp/hello-iframe.html

它稍微详细说明：该消息中的每个字符，这种结构一个iframe源于http://hashcollision.org/tmp/hello-iframe-inner.html。然后，我使用postMessage与每个人的iframe进行通信，告诉它要显示哪个字符。此外，iframe也通过postMessage将iframe的几何体传回给父页面。这完全没用，但它是一个可爱的测试页面。

目前尴尬的事情之一是，在给定iframe的窗口的情况下，找到拥有的iframe。

我做了为环走我所有的I帧，并与===检查窗口，但似乎有点傻。有没有更好的方法来做到这一点？

来源

2011-11-28 dyoo

我能想出的最佳解决方案是：为每个iframe生成一个随机标识符。在iframe和父窗口之间的所有通信中，iframe将在postMessage的内容中包含其“自我”标识符。这允许父母在接收消息时进行快速简单的查找。

下面是修改后的例子，与HELLO-Iframe.html的的内容为：

<html> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> 
</script> 
<script> 

var run = function() { 
    var msg = "Hello world, this is a test of the emergency broadcast system."; 
    var i; 
    document.body.appendChild(document.createElement("hr")); 
    for (i = 0; i < msg.length; i++) { 
     spawnCharacterIframe(msg.charAt(i)); 
    } 
    document.body.appendChild(document.createElement("hr")); 
}; 

var _gensymCounter = 0; 
var gensym = function() { 
    var result = [], i; 
    var LEN = 32; 
    result.push((_gensymCounter++) + "_"); 
    var chars = "ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz"; 
    for (i = 0; i < LEN; i++) { 
     result.push(chars.charAt(Math.floor(Math.random() * chars.length))); 
    } 
    return result.join(''); 
}; 

var spawnCharacterIframe = function(ch, id) { 
    id = id || gensym(); 
    var newIframe = document.createElement("iframe"); 
    newIframe.setAttribute("frameborder", "0"); 
    newIframe.setAttribute("border", "0px"); 
    newIframe.setAttribute("width", "0px"); 
    newIframe.setAttribute("height", "0px"); 
    newIframe.setAttribute("src", "hello-iframe-inner.html?selfId=" + encodeURIComponent(id)); 
    newIframe.setAttribute("id", id); 
    $(newIframe).data('ch', ch); 
    document.body.appendChild(newIframe); 
}; 

var findIframe = function(w) { 
    var found; 
    $('iframe').each(function() { 
     if (this.contentWindow == w) { 
      found = this; 
     } 
    }); 
    return found; 
}; 



$(window).on('message', 
      function(e) { 
       var data = e.originalEvent.data; 
       var source = e.originalEvent.source; 
       var iframe, sourceId; 

       if(data.match(/^([^,]+)[,](.+)$/)) { 
        sourceId = RegExp.$1; 
        data = RegExp.$2; 
        if (document.getElementById(sourceId)) { 
         iframe = document.getElementById(sourceId); 
        } else { 
         return; 
        } 
       } else { 
        return; 
       } 

       if (data === 'ready') { 
        iframe.contentWindow.postMessage($(iframe).data('ch'), '*'); 
       } else if (data.match(/^(\d+),(\d+)$/)) { 
        var w = RegExp.$1; 
        var h = RegExp.$2; 
        if (iframe.width !== w + 'px') { 
         iframe.width = w + "px"; 
        } 
        if (iframe.height !== h + 'px') { 
         iframe.height = h + "px"; 
        } 
       } 
      }); 


$(document).ready(run); 
</script> 
<body> 
<h1>testing iframes</h1> 
</body> 
</html>

和HELLO-iframe的inner.html的内容为：

<html><head></head> 
<script> 

// http://stackoverflow.com/questions/901115/get-query-string-values-in-javascript 
var urlParams = {}; 
(function() { 
    var e, 
     a = /\+/g, // Regex for replacing addition symbol with a space 
     r = /([^&=]+)=?([^&]*)/g, 
     d = function (s) { return decodeURIComponent(s.replace(a, " ")); }, 
     q = window.location.search.substring(1); 

    while (e = r.exec(q)) 
     urlParams[d(e[1])] = d(e[2]); 
})(); 


var SELF_ID = urlParams.selfId; 
window.addEventListener("message", 
     function(e) { 
      if (e.data === ' ') { 
       document.body.innerHTML = "&nbsp;"; 
      } else { 
       document.body.appendChild(
        document.createTextNode(e.data)); 
      } 
     }); 


window.onload = function() { 
    document.body.style.margin = '0px'; 
    var w, h; 
    if (window.parent && SELF_ID) { 
     window.parent.postMessage(SELF_ID + ',ready', '*'); 

     setInterval(function() { 
      if (h !== document.body.scrollHeight || 
       w !== document.body.scrollWidth) { 
       w = document.body.scrollWidth; 
       h = document.body.scrollHeight; 
       if (window.parent) { 
        window.parent.postMessage(SELF_ID + ',' + w + ',' + h, '*'); 
       } 
      } 
     }, 1000); 
    } 
}; 

</script> 
<body></body> 
</html>

来源

2011-12-01 23:28:21 dyoo

不，没有。（而且我不太确定除此之外别说什么，你已经在尽力做到最好。）

来源

2011-11-28 01:03:56 gsnedders

给定一个iframe的窗口，是否可以轻松访问拥有的iframe？

回答

相关问题