iframe内の画面操作を行ったら、高さを自動調整したい

いつもお世話になっております。
現在、自社サイトにiframeを表示させています。
クロスドメインですが、現在の対応でiframeの高さ自動調整はうまくいきました。
しかし、レスポンシブには対応できたのですが、表示したiframe内で表示・非表示などの操作があった際に、iframeが見切れてしまいました。

そこで、iframe内で表示・非表示など、何らかの操作があれば高さの自動調整を追加したいのですが、何か良い方法はないでしょうか。
ご教授いただけると幸いです。よろしくお願いいたします。

【外部サイトAAA.comのHEAD内へ記述】

<script>
$(window).on('load resize', function(){
  setTimeout(function(){
    var height = $('body').height();
    window.parent.postMessage(height, 'https://BBB.jp');
  });
});
</script>

【自社サイトBBBにiframe表示】

<iframe class="frame" frameborder="no" scrolling="no" src="https://AAA.com" style="max-width:100%;border:none;overflow:auto;"></iframe>

【自社サイトBBB.jsのjsへ】

$(function(){
    $(window).on('message', function(event){
      
      if (event.originalEvent.origin != 'https://AAA.com') return;
      $('.frame').css({
        'height': event.originalEvent.data
      });
    });
  });