Question

「クロスドメインでiframeの高さを自動調節するjavascript」を1ページで2箇所異なる高さの
パーツに使いたい場合、JSをどのように編集したら良いでしょうか？
http://i556tips.tumblr.com/post/15710917018/%E3%82%AF%E3%83%AD%E3%8...


■親.html

<script>
window.addEventListener("message", receiveSize, false);
function receiveSize(e) {
if (e.origin === "http://hogehoge.com")
document.getElementById("bar").style.height = e.data+ 10 + "px";
}
</script>

<iframe id="bar" frameborder="0" scrolling="no" src="http://hogehoge.com/a.html" width="100%" height="0"></iframe>
<iframe id="bar2" frameborder="0" scrolling="no" src="http://hogehoge.com/b.html" width="100%" height="0"></iframe>


■子 a.html

<script type="text/javascript">
window.addEventListener("load", postSize, false);
function postSize(e){
var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
if (typeof target != "undefined" && document.body.scrollHeight)
target.postMessage(document.getElementById("foo").scrollHeight, "*");
}

</script>
<section id="foo">~~~~</section>

■子 b.html

<script type="text/javascript">
window.addEventListener("load", postSize, false);
function postSize(e){
var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
if (typeof target != "undefined" && document.body.scrollHeight)
target.postMessage(document.getElementById("foo2").scrollHeight, "*");
}

</script>
<section id="foo2">~~~~</section>