some functions don't work inside window.onmessage

Ask the community
,
1

Hye
I create a docx file with js inside an html iframe. It takes data from my site when button is clicked by:

$w('#html1').postMessage($w('#input1').value)

and creates the docx inside the html code, when clicking another button that I have created at the :

...
<body>
    <button type="button" onclick="generate()">Download</button>

<script>

    let receivedData="";

    function generate() {     

	 const doc = new docx.Document();
	 ... // write receivedData to the doc 
	 docx.Packer.toBlob(doc).then(blob => {
		saveAs(blob, "MyFile.docx");
		});
	}


window.onmessage = (event) => {
    if (event.data){
        receivedData = event.data;
  }
   };

</script>
</body>
</html>

Now, the code below works FINE. But I don’t want 2 buttons. I want only my button at the site (which sends ‘post message’ to the html) and I want ‘window.onmessage’ create te doc and download it.

I’ve tried to call generate () inside window.onmessage after receiving the data, it doesn’t been called. I also tried to copy all the generate function code and paste it insdie window.onmessage, it doesn’t work too.

What am I missing?
Tnx

2

As presented by you, the iFrame is not doing anything with the data passed to the iFrame with the POST command.

Also, when the button inside the iFrame is clicked, the function GENERATE creates your docx, but without the data from the wix/corvid site.

Try something like this:

/* * * * * * * * * * * * * * * * * * * * * * * * *
* Paste the following into the HTML Component:  *
* * * * * * * * * * * * * * * * * * * * * * * * */

<!doctype html>
<html>
<head>
<script type="text/javascript">

function init () {

  // when a message is received from the page code
  window.onmessage = (event) => {

    let receivedData="";  // clear var

    if (event.data){    // if any data received, continue

                        // (you should validate data here)

      	console.log("HTML Code Element received a message!");

      	insertMessage(event.data);



        receivedData = event.data;  // data passed from wix page is now in this var

         const doc = new docx.Document();

	 ... // write receivedData to the doc 

	 docx.Packer.toBlob(doc).then(blob => {
		saveAs(blob, "MyFile.docx");
		});

    } // end if
  } // end onmessage
} // end init

</script>
</head>

<body onload="init();" style="background-color:lightgray;">
<h1>HTML Component Test</h1>
</body>
</html>
3

Thank you very much for answering, but I see you haven’t understood. I wrote that THE IFRAME IS GETTING THE DATA FROM THE PAGE. It gets it fine and generates the docx great! that’s not the problem.

The problem is that it CAN’T BE DONE INSIDE WINDOW.ONMESSAGE. Somehow, it can be done only in a separate function that I call by clicking a button that is created inside the iframe.

4

@avtsy You described your problem clearly.
I use iFrames extensively in my applications.

  • The code you provide above does NOT use the data sent to the iFrame.

  • The function GENERATE may well generate a docx, as you say it does, but it does NOT include the data sent to the iFrame (not with the code you posted).

  • You may want to check your resulting docx and verify what is really being generated and why you believe that code is working for you (the data transfer from the page to the iFrame).

  • To handle any data sent to the iFrame, you must properly process received data inside the window.onmessage function.

https://support.wix.com/en/article/corvid-working-with-the-html-element

5

Hi, tnx for coming back!

My code does show how I use the data that eas transfered from the page to the iframe: at the end of the code, window.onmessage initalize receivedData. Then, when the iframe button is clicked, it uses the receivedData to geneate the docx. I checked it many times and it works great. The docx contains the text that was sent from the page, I’m sure :slight_smile:

All I want is to cancel the iframe button. I want everything to happen inside window.onmessage, and for some reason it can’t be done.

Tnx

6

LOL.
OK, so you click and transfer the page data to the var receivedData inside the windows.onmessage. When you click the button inside the iFrame, the function GENERATE creates the docx with the “loaded” receivedData var … but if the var is not loaded (from the page) and you click the iFrame button, then the docx is generated without the page data …

Whoa. LMAO.

OK, if you like your code “as is,” then all you need to do is to call GENERATE from inside the windows.onmessage function.

Delete the button in the iFrame and change this part in your code:

window.onmessage = (event) => {
    if (event.data){
        receivedData = event.data;
        generate(); // calls the generate function with "loaded" received.Data
  }

You got me good - must be April 1st.

7

Hey, thanks for answering! about your concern - I will validate that the var is loaded, that is not my problem now…

I have tried to call generate () as you suggested, and I also tried to copy the content of generate function and paste it inside window.onmessage instaed of calling the function - both don’t work!

And this is weird, because as I said, generate() works great alone when the iframe button is clicked.

AND IT IS GETTING CRAZY WHEN I DO SO! I want to add more - maybe you will know what is going on: when I use the code pasted right here (this time I pasted it all for you), and I watch the console - I get:

before generate
generate 1
generate 2

22500 TIMES! like an endless loop!

Same thing happens when I just paste the generate content inside window.onmessage instead of calling another function.

Please help! :slight_smile:

the iframe code:

<!DOCTYPE html>

<html>

<head>

    <script src="https://unpkg.com/docx@5.0.2/build/index.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js"></script>

</head>

<body>

<script>

	let receivedData="d";

	function generate() {        	

	console.log ("generate 1");

	const doc = new docx.Document();

            	doc.addSection({

               	properties: {},

                	children: [

                    	new docx.Paragraph({

                        		children: [

                            		new docx.TextRun(receivedData),

             			],

                    	}),

                	],

            	});

	console.log ("generate 2");

	docx.Packer.toBlob(doc).then(blob => {

		console.log ("generate 3");

               	saveAs(blob, "MyDoc.docx");

		console.log ("generate 4");

               });

}



	window.onmessage = (event) => {

		if (event.data){

      			receivedData = event.data;

		console.log ("before generate");

			generate ();

		} 

  	};   

 </script>

</body>

</html>
8

Anybody? please? I can’t solve it!