同一ページにある2つのiframeを、高さが上書きされないように実装したい

Question

index.phpに、
下記の2つのコードがあります。

実現したいことは、
それぞれのiframeの高さを挿入したいです。
aaa1のheightは「100」
aaa2のheightは「200」

しかし、このままでは、
高さが上書きされてしまいました。

どうすれば解決できるのか？分かりません。

考えたのは、
「e.originのURLを絞る」くらいです。
しかし書き方が分かりませんでした。

よろしくお願い致します。

<iframe id="aaa1" width="100%" src="https://hoge.com/aaa1/iframe.php"></iframe>
<script>
window.addEventListener('message', function(e) {
if(e.origin=="https://hoge.com"){
document.getElementById("aaa1").height = e.data;}},false);
</script>

<iframe id="aaa2" width="100%" src="https://hoge.com/aaa2/iframe.php"></iframe>
<script>
window.addEventListener('message', function(e) {
if(e.origin=="https://hoge.com"){
document.getElementById("aaa2").height = e.data;}},false);
</script>

Answer 1

100と200はpxなのか%なのか、
なぜe.dataにしなければならないのか、
そのへんがわからないのと
質問の意味がよくわからないので
恐らくになります。

document.getElementById("aaa1").height = e.data;
を
document.getElementById("aaa1").style.height = "100px"
同様に
document.getElementById("aaa2").style.height = "200px"

これで如何でしょうか？