my iframe height fix + modal pop up fix

To respect same-origin policy and so for this fiddle to work, the url of the iframe must be on fiddle.jshell.net .

by blueseal

HTML

<div class="app" style="height:200vh;">
 
  <iframe width="80%" height="400" title="test" src="https://csb-os3po.netlify.app/" sandbox="allow-same-origin allow-forms allow-scripts allow-top-navigation" class="wp-embedded-content" id="parent-iframe"></iframe>
</div>

JavaScript

let oldScrollPos = 0;
const MIN_SCROLL = 50;

const INIT_IFRAME_HEIGHT = 200;
const EXTRA_HEIGHT = 1;
const EXPAND_CARD_HEIGHT = 20;
const NON_EXPAND_CARD_HEIGHT = 15;

//use "https://ratesearch.primefreight.com"
const CHILD_ORIGIN = "https://csb-os3po.netlify.app";

window.onload = () => {
  console.log('onload is called'); //remove this line later
  window.addEventListener("message", this.receiveMessage);
  window.addEventListener('scroll', this.handleScroll);
};


receiveMessage = (event) => {

  //console.log("receiveMessage, data: ", event.data); //remove this line later

  if (event.origin !== CHILD_ORIGIN) {
    console.log("wrong origin: ", event.origin);
    return;
  }

  const mesgObj = event.data;

  /*   console.log("parent site, mesgObj: ", mesgObj); */

  if (typeof mesgObj !== "object") {
    return;
  }

  if (mesgObj.type === 'RATE_CARDS_INFO') {

    if (typeof mesgObj.payload !== "object") {
      return;
    }

    let noOfCards = Number(mesgObj.payload.noOfCards);
    noOfCards = isNaN(noOfCards) ? 0 : noOfCards;

    let noOfExpandedCards = Number(mesgObj.payload.noOfExpandedCards);
    noOfExpandedCards = isNaN(noOfExpandedCards) ? 0 : noOfExpandedCards;


    const totalHeight = noOfExpandedCards * EXPAND_CARD_HEIGHT + Math.abs(noOfCards - noOfExpandedCards) * NON_EXPAND_CARD_HEIGHT + INIT_IFRAME_HEIGHT + EXTRA_HEIGHT;

    //console.log('receiveMessage, totalHeight:', totalHeight); //remove this line later

    const ifrm = document.querySelector("#parent-iframe");
    ifrm.style.height = totalHeight + "px"

  }
}

handleScroll = (event) => {
  const scrollTop = window.scrollY;

  if (Math.abs(scrollTop - oldScrollPos) < MIN_SCROLL) {
    return;
  }

  const relativeScrollPos = scrollTop - oldScrollPos;

  oldScrollPos = scrollTop

  const messageObj = {
    type: 'SCROLL_POSITION',
    payload: relativeScrollPos
  };

  //console.log('handleScroll: ', { messageObj}, CHILD_ORIGIN); //remove this line later

  const ifrm =...