my iframe height 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="200" 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

const INIT_IFRAME_HEIGHT = 200; //init ifarme heght, check ifarme in html
const EXTRA_HEIGHT = 1; //you can provide some extra height apart from no of rate cards
const EXPAND_CARD_HEIGHT = 20; //you can use 585
const NON_EXPAND_CARD_HEIGHT = 15; //you can use 265

//use ratesearch app origin when you use this code in wp site i.e. "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);
};


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"

  }
}

//you might use jquery equivalent of this, you may ignore this if it doesn't work
window.addEventListener('beforeunload', () => {
  console.log('beforeunload is called'); //remove this line later
  window.removeEventListener("message", this.receiveMessage)
});