problem with postMessage

Ask the community
,
1

I used example code from HTML Component page, but instead “Message from page code” I got query data: {“data”:{“type”:“initToChild”,“counterId”:41177874,“hid”:451663589},“__yminfo”:“__yminfo:1526818183417:0.13191111428617996:0”}

2

Hey Anton,

Welcome to the Wix Code Forum.

We’ll need more information to help. What example code are you using? What changes did you make? What does your code look like?

Yisrael

3

I used code from this page:

I didn’t make any changes. Only this code in my dynamic page.

4

This code

616×1112 112 KB

5

Hi,
You need to modify the example code to match your site,
change the variables (for example “#myHtmlComponent”) to your element’s id.

Good luck :slight_smile:

6

I did it of cause.
Here is link to the dynamic page:
https://www.poka-poka.com/product/kroshka-carrot

7

The message was received from page code to html component. insertMessage function is work but instead of text from page code “Message from page code!” inserted:
{“data”:{“type”:“initToChild”,“counterId”:41177874,“hid”:105847786},“__yminfo”:“__yminfo:1527058504645:0.3978067198981161:0”}

8

I only added console.log to my code in html component.

946×1092 17 KB

9

Anton,

In your page code you have the function messageSendButton_onClick() , but I don’t see a button on the page that has the ID #messageSendButton. Also, when I load the page, the browser’s Javascript console shows a number of errors. Before you can get the HtmlComponent to work, you will need to fix the other errors.

Yisrael

10

Ok, got it.
I fixed errors and changed the page code to:

$w.onReady(function () {
  // when a message is received from the HTML Component
  $w("#html1").postMessage('google.com');
} );

and the code of html component to:


<!doctype html>
<html>
<head>

<script type="text/javascript">
function init () {
  // when a message is received from the page code
  window.onmessage = (event) => {
    if (event.data) {
      console.log("HTML Code Element received a message!");
      console.log(event.data);
      insertMessage(event.data);
    }
  }
}

// display received message
function insertMessage(msg) {
  document.getElementById('demo').innerHTML = msg;
  console.log('insertMessage function is done')
}

</script>

</head>

<body onload="init();" style="background-color:lightgray;">
<h1>HTML Component Test</h1>
<p id="demo">will be here</p>
</body>
</html>

but every time I get:


{"data":{"type":"initToChild","counterId":41177874,"hid":325299747},"__yminfo":"__yminfo:1527146753079:0.8121634407411258:0"}

instead of: google.com

11

It works for me in Preview, however the error occurs in Live. This is because you are sending the message from the page’s onrReady() function. It might be the case (and most likely is) that the page is ready before the HtmlComponent, and the message is being sent before the HtmlComponent is able to receive it.

You will need to code some sort of a handshake where the HtmlComponent informs the page that it is ready and can now send a message.

Good luck,

Yisrael

12

Yeah, I got it.
Thank you

13

Anton:

How did you do the handshake? I’m trying to pass a variable from a database to my HTML Component. Thx!

14

I figured it out… …placement and timing of code and utilizing promises. Also, I had the component send a message when it was ready before the Wix code communicated anything.

15

@brett82 can you be more specific, what is the placing and timing that is needed to be done?

16

@dextr327 @Yisrael (Wix)

First, let may say I love Wix code & it’s getting better every day. However, when it comes to HTML Components, I’ve noticed it doesn’t always work perfectly and there are a few nuances.

Also, depending on what you are doing, performance varies from browser to browser. I’ve found it works best with Chrome.

That said, here’s what I did:

  1. In the component, make an initial call to a function in the body tag.

Example

In this example, the sendLoadMessage function will send a message to the Wix code.

Example: window.parent.postMessage(‘TriggerPost’, ‘*’);

This will ensure everything has been loaded in your component and it’s now ready to receive.

Now you must receive the message in your w.onReady( function ()) in your Wix code and then you can send a variable back from a dataset or something.

In the following example, I send back a YouTube video URL.

Example:

$w(“#html”).onMessage( (event) => {
if (event.data===“TriggerPost”){
$w(“#html”).postMessage(location);
}
} );

17

@dextr327 Sorry for the late reply, did you figure it out? What are you using postMessage for?