HTML .onMessage help!

Ask the community
,
1

I have a html component to obtain the screen resolution of the user and I would like to retrieve this message from the html component but for some reason it is not working.
I have noticed others have had issues with .onMessage also, but can’t resolve my issue even after looking through many different examples and test. Please help!

My page code:

$w.onReady(function () {
 // when a message is received from the HTML Component
        $w("#htmlScreen").onMessage((event) => {
            console.log(`Screen resolution: height:${event.data.height}, width:${event.data.width} `);
        });
});

My html code:
<!doctype html>

2

Have you read the Wix API Reference for HTML Component and the support page for it?
https://www.wix.com/corvid/reference/$w.HtmlComponent.html
https://support.wix.com/en/article/corvid-working-with-the-html-element

3

Does this:

$w("#htmlScreen").onMessage((event) => {
            console.log(`Screen resolution: height:${event.data.height}, width:${event.data.width} `);

get ever displayed, even without height and width? If so, what is exactly the problem?

4

The issue is that nothing is received from the html component. Nothing is added to the console log. This issue happens even when trying the examples wix provides.

5

I’ll have a good read through that, I’ve not seen that page before. I have worked through the api example page but I couldn’t get results using that. Looking through the forum, quite a few others have had similar issues with .onMesage.

6

Yes, I tried the example too. HTLM component able to receive but failed to send.

7

@ayleung66 ditto

8

One question: does it run in PReview Mode? If it does, but not in Publish Mode, look here for solution : https://girizano.wixsite.com/codecorner/post/html-component-not-running-in-publish-mode-google-sheets-example

9

No nothing comes through in preview mode. :pensive:

10

@eaton-thomas Well, I just checked my DatePicker-demo https://girizano.wixsite.com/codecorner/datepicker-demo
on same site, which uses extensive communication with html-component, and that still works. SO there seems to be nothing wrong with the html-comp itself.

11

I’ve managed to get what I need to work, but I had to post a message to the html component and then instruct the html component to sent a message back once a meesage had been received from the page.

Hope this makes sense, thanks for all your help!

12

The issue is onload on body.
Put the inside of the body.
Or try move the init() to top of the section.