JSFiddle - React, Tailwind, and code Playground

by blueseal

HTML

<div style="height:200vh;">

  <div style="margin-top:300px;">
    <iframe 
    width="80%" 
    height="400" 
    title="test" 
    src="https://csb-os3po.netlify.app/" 
    sandbox="allow-same-origin allow-forms allow-scripts allow-top-navigation" 
    id="parent-iframe" 
    />
  </div>


</div>

JavaScript

const EXTRA_HEIGHT = 0; //you can provide some extra height apart from no of rate cards
 console.log('onload is called');

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


receiveMessage = (event) => {
  console.log("receiveMessage");

  /* if (event.origin !== "https://ratesearch.primefreight.com") { */
  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 * 585 + Math.abs(noOfCards - noOfExpandedCards) * 265 + EXTRA_HEIGHT;

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

    const ifrm = document.querySelector("#advanced_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)
});