在iframe使用中關(guān)于數(shù)據(jù)傳遞的一些問(wèn)題

Object 發(fā)布于2019-08-19 14:26 / 2997人閱讀

摘要：之前很少使用這個(gè)標(biāo)簽，因?yàn)楦杏X(jué)到父子頁(yè)面之間傳遞數(shù)據(jù)不太方便。最近同事做的一組頁(yè)面中大量的使用了用來(lái)嵌入其他頁(yè)面，由于懶所以只好看看如何在的標(biāo)簽下傳遞數(shù)據(jù)。在父頁(yè)面中使用函數(shù)來(lái)向子頁(yè)面發(fā)送消息而在子頁(yè)面中添加這個(gè)來(lái)接受消息。

之前很少使用IFRAME這個(gè)標(biāo)簽，因?yàn)楦杏X(jué)到父子頁(yè)面之間傳遞數(shù)據(jù)不太方便。最近同事做的一組頁(yè)面中大量的使用了IFRAME用來(lái)嵌入其他頁(yè)面，由于懶,所以只好看看如何在IFRAME的標(biāo)簽下傳遞數(shù)據(jù)。

在網(wǎng)上找了找相關(guān)的資料，方法確實(shí)不少，這里只說(shuō)我實(shí)際用到過(guò)的兩種方法：
1. 在子頁(yè)面中用parent屬性也引用父頁(yè)面的內(nèi)容,但是好像只在IE中能夠使用，在CHROME和Firefox始終沒(méi)有反應(yīng)。
2. 在父頁(yè)面中使用document.getElementById("test").contentWindow.postMessage(message, "*");函數(shù)來(lái)向子頁(yè)面發(fā)送消息；而在子頁(yè)面中添加window.addEventListener("message", onmessage, false);這個(gè)Listener來(lái)接受消息。不過(guò)在這種方法中值得注意的一點(diǎn)是，最好能將發(fā)送消息的postMessage函數(shù)包含在$("#test").load(function(){});中，因?yàn)槿绻皇褂?b>load的話，很有可能消息在子頁(yè)面的Listener添加之前就發(fā)送出去了，那么子頁(yè)面是無(wú)法接受到任何消息的。