JSFiddle - React, Tailwind, and code Playground

by blueseal

HTML

<div id="tester" style="height:200vh;background:#ff000030;">

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

</div>

CSS

/* #tester {
  height: 500vh;
  background:#ff000030; 
} */

JavaScript

const EXTRA_HEIGHT = 0; //you can provide some extra height apart from no of rate cards

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

handleScroll=(e)=>{
console.log("scroll");
}


 receiveMessage = (event) => {
   /*  if (event.origin !== "https://ratesearch.primefreight.com") { */
      // console.log("wrong origin");
  /*     return;
          }
         */
    const mesgObj = event.data;
    
    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;
   
       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)
});