給定一個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？

回答

相關問題