0

I have this code that I am trying to rewrite for Gutenberg block:

    <script type="text/javascript">
        <iframe onload="javascript:resizeIframe(this);" 
            src="/modularconvbox/modularconvbox.php?type=newsletter&amp;title=Subsribe to our newsletter!&amp;text=Once in a lifetime opportunity to get all our latest posts delivered right to your inbox!&amp;button=Subscribe!&amp;secret=not_set"
             scrolling="no" frameborder="0" width:100%="" style="width: 1px; min-width: 100%; border: none; height: 70px;">
            </iframe>
      function resizeIframe(obj){
         {obj.style.height = 0;};
         {obj.style.height = (obj.contentWindow.document.body.scrollHeight+70) + "px";}
      }
    </script>

This is my save() function:

save({ attributes }) {
  return (

    <iframe
      onLoad={resizeIframe}
      src={"https://domain.me/modularconvbox/modularconvbox.php?type=newsletter&title=" + attributes.title + "&text=" +attributes.text + "&button=" + attributes.button + "!&secret=" + attributes.button} 
      scrolling= {"no"} 
      frameborder= {"0"} 
      width= {"100%"} 
    />

  );
}

I don't know how to wirte this resizeIframe function. It seems nothing I write here works. I've tried to test with:

 onLoad={() => console.log('LOADED')}

Does anyone know how to get this to work?

  • I would note that this is perhaps more applicable to general React components than you might realise, just note that you may not necessarily want to apply it to the save function, try the edit function instead – Tom J Nowell Jul 10 '18 at 15:35
  • In particular: github.com/WordPress/gutenberg-examples/blob/master/…, the save function determines what gets put in the document, not what is displayed on screen, so it doesn't make sense to apply JS libraries to it – Tom J Nowell Jul 10 '18 at 15:40
  • @TomJNowell Could you, please, be more precise about how I should change the code to add an onLoad function to the iFrame that will be saved? I am still trying to get familiar with React – ivanacorovic Jul 10 '18 at 21:43
  • I don't know how to integrate it, else I'd answer, but the answer here would be the same as any answer in generic React, except it would be in an edit function not a save function. Applying it in the save function makes no sense, similar to how to apply a JS library directly to a database table – Tom J Nowell Jul 11 '18 at 7:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.