let frame = document.getElementById('iframe');
let iframeHeight = 0;
window.addEventListener('message', function(event) {
    if (event.data.type === "onload" && event.data.isHeight === true) {
        frame.style.height = event.data.data + "px"
        iframeHeight = event.data.data
        frame.contentWindow.postMessage({ type: "scrollTop", data: getScrollTop(), iframeHeight, initHeight: getClientHeight() }, '*');
    }
    if (event.data.type === "onload" && event.data.isHeight === false) {
        frame.style.height = "100vh"
    }
    if (event.data.type === "gotop") {
        document.documentElement.scrollTop = document.body.scrollTop = 0
    }
})
window.onscroll = function() {
    let clientHeightWindow = getClientHeight()
    frame.contentWindow.postMessage({ type: "scrollTop", data: getScrollTop(), iframeHeight, initHeight: clientHeightWindow }, '*');
}

function getClientHeight() {
    let clientHeight = 0;
    if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
    } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
    }
    return clientHeight;
}

function getScrollTop() {
    let scrollTop = 0;
    if (document.documentElement && document.documentElement.scrollTop) {
        scrollTop = document.documentElement.scrollTop;
    } else if (document.body) {
        scrollTop = document.body.scrollTop;
    }
    return scrollTop;
}