I am trying to understand messaging between page code and HTML element.
I have the following 2 items on page:
I have a code in the HTML element “code” part, which waits for the page to load, then sends a message (“Message from iFrame”) to the page, then waits for an answer from the page. After getting the answer, shows the answer:
<html>
<head>
<script>
window.addEventListener('load', function() {
window.parent.postMessage("Message from iFrame", "*");
window.onmessage = (event) => {
if (event.data) {
document.getElementById("theLabel").innerHTML = event.data;
}
};
})
</script>
</head>
<body>
<span id="theLabel" class="label">HTML Label</span>
</body>
</html>
The page code waits for the first message from the HTML element, then sends an answer to it.
$w.onReady(function () {
// TODO: write yor page related code here...
$w("#html4").onMessage( (event) => {
let receivedData = event.data;
$w('#text32').text = receivedData;
$w("#html4").postMessage("answer from Corvid");
} );
});
On the page, the text element is above and the HTML element is below. So I am expecting to see:
-Message from iFrame
-answer from Corvid
But instead, I see this:
-Message from iFrame
-[object Object]
Then after a few seconds, “[object Object]” becomes “answer from Corvid” for a few milliseconds and becomes “[object Object]” again.
What I want to do is having the actual message properly.
Did you see Corvid: Working with the Html Element ?
It fully explains the messaging between the page and the HtmlComponent.
Yes, I read it a hundred times.
Actually I believe I managed to message 2-way but I have the problem with the HTML element part. I don’t know what I am doing wrong. Should I save the incoming message in a variable, or should I use a different structure, I don’t know.
I created the codes while studying postMessage( ) and Corvid: Working with the HTML Element pages.
I copied/pasted all the codes, file names from the example on Corvid: Working with the HTML Element. Applied them on an empty page. I still see the “[object Object]” thing.
I think a Wix app or widget I use on the site prevents it from working properly. Or I am not importing something I should.
Try out the HtmlComponent example. It’s based on the Corvid: Working with the HTML Element and should give you good start.
Yes!
It works because some minor details was not given in the original example.
For example, in the button properties in Wix corvid, events are defined but not told in the example.
And in the example code, onClick function is messageSendButton_onClick (), but in working example it is messageSendButton_click(event).
These may be small details that can be solved for an expert but are impossible for me to notice and correct.
Anyway, thanks a lot for your help. I can go further from here.
@yisrael-wix Hi Yisrael, the HtmlComponent link example can’t be access, do you got another source?
@yisrael-wix Thanks for the link Yisrael, I try to send Trading view widget html embed code from database (I’m planning to store different widget for different stocks). But turns out the HTML embed only shows links instead of the widget itself.
Any clue what causing that to happen?
widget source
My embed:
@dennis-chuang-dz The embedded code in an HtmlComponent cannot be set programmatically.
You could write an embedded script that modifies itself, but that wouldn’t be a simple task.
@yisrael-wix I see, I try to follow @giri-zano 's code example and didn’t work (html always received Object object messages). Then I try to use your HtmlComponent sample to send message to HTML element (which received but turns out only showing link which I’ve provided in the second picture, instead showing the widget). This is really confusing
