How do i change the parent side iframe to the entire height of the SAPUI5 child side?

My goal is to implement my SAPUI5 website into an iframe that resizes itself to the complete height of the iframe content. The website that includes the iframe is on a different server.

How do i pass the entire height of the website to the parent page?
The examples use a localhost site instead of the original.
The used version of the SAPUI5 framework is 1.120.

My first attempts were entirely parent side calculations, which didn’t work because of the cross-DOM policies. I cannot change these policies at the moment.
The attempts shown below are later implementations since i lost the code for the first attempt.


This was the second attempt. It works with pages that are not created with the SAPUI5 framework. The received size for the SAPUI5 child is always the current iframe height.

Parent side:

<script>        
    window.addEventListener('message', receiveMessage, false);

    function receiveMessage(size){
        resizeIFrameToFitContent(size.data);
    }
                
    function resizeIFrameToFitContent(size){
        document.getElementById("exampleFrame").style.height = size;
    }
</script>

Child side:

function postPageSize(){
    size = window.document.body.scrollHeight + "px";
    window.parent.postMessage(size, '*');
}


There was also this attempt by using an interval and resizing the page more or less “dynamically”. Here i get the error “Uncaught DOMException: Permission denied to access property “document” on cross-origin object” which is currently not solvable for me.

Parent side:

<script>
setInterval(function(){
    var pageHeight = document.getElementById("exampleFrame").contentWindow.document.body.offsetHeight;
}, 1000)
</script>


Last attempt was a bit more elaborate and uses some self written functions of our own. This also returns the current size of the iframe.
It should be noted that this code works on a older webpage made with the SAP framework.

Parent side:

<script>
  window.addEventListener('message', e=>{if (e.origin=="http://localhost"){
        
        var iFr = document.getElementById("exampleFrame")
        if (iFr && iFr.style.height != e.data) iFr.style.height = e.data
    }})
</script>

<iframe src="http://localhost/path/to/page" id="exampleFrame" style="height:500px"></iframe>

Child side:

function ensureIFrameResizingFor(MainCont){
    setInterval(function(){
        var pgId = MainCont.getCurrentPage().getId() //MainCont is our usual App- or Navigation-Container (which holds "Pages")
        var hFrm = 0, hHdr = 0
        
        var hdr = document.querySelector("#" + pgId + " .sapMPageHeader") 
        if (hdr) hHdr = parseInt("0" + getComputedStyle(hdr).getPropertyValue("height"))
 
        var frm = document.querySelector("#" + pgId + " .sapUiSimpleForm") 
        if (!frm){
            hHdr = 3*hHdr
            frm = document.querySelector("#" + pgId + " .sapUiTableVSbContent") //fallback (second attempt, in case the Page is a Listing-Page)
            if (!frm) frm = document.querySelector("#" + pgId + " .sapMListTblCnt") 
        } 
        if (frm) hFrm = parseInt("0" + getComputedStyle(frm).getPropertyValue("height"))
        //console.log(hFrm, hHdr)

        if (hFrm) top.postMessage((hFrm + hHdr + 18) + "px", PostMsg_CallbackURL)
    }, 500)
}