I never get the notification that the html page got my message? What am I missing here?
Page Code:
import wixUsers from ‘wix-users’;
import wixData from ‘wix-data’;
let DashNo;
$w.onReady( function () {
if (wixUsers.currentUser.loggedIn) {
let user = wixUsers.currentUser;
user.getEmail()
.then( (email) => {
let userEmail = email;
let wixID = user.id
console.log(“Email: " + userEmail + " ID: " + wixID );
}
)}
DashNo = $w(‘#dashNo’);
// when a message is received from the HTML Component
$w(”#myHtmlComponent").onMessage( (event) => {
console.log(Message received by page code: ${event.data});
} );
$w(“#myHtmlComponent”).hide();
})
export function messageSendButton_click(event) {
// send message to the HTML Component
$w(“#myHtmlComponent”).postMessage(“Photos of CV” + DashNo);
$w(“#myHtmlComponent”).show();
}
$w.onReady( function () {
// when a message is received from the HTML element
$w(“#myHtmlComponent”).onMessage( (event) => {
$w(“#text1”).text = event.data;
} );
} );
export function messageSendButton_click(event) {
$w(“#myHtmlComponent”).postMessage($w(“#textInput1”).value);
}
<script type="text/javascript">
// when a message is received from the page code
window.onmessage = (event) => {
if (event.data) {
document.getElementById("theLabel").innerHTML = event.data;
}
};
// send message to the page code
function button_click() {
window.parent.postMessage(document.getElementById("theMessage").value, "*");
}
</script>
HTML Label
< Send Message
=======================================================
PAGE DOES NOT WORK! NO MESSAGES WILL SEND EITHER WAY!!!
=======================================================
Java Developer console log:
It does work, you just need to read and understand the error message.
In your example picture, you are passing a number to a text box, hence the error message of text method cannot be set to the value… It must be of type string…
Sorry, I did not realize it would interpret that as a number… the field in the page code is defined as text…
Regardless, I retested it and entered a string. NOTHING displayed in html frame… BUT it IS working the other way… see screen shot
So it looks like the following code did not get the event.data…
<script type="text/javascript">
// when a message is received from the page code
window.onmessage = (event) => {
if (event.data) {
document.getElementById("theLabel").innerHTML = event.data;
}
};
For reference … page code for the send button is:
export function messageSendButton_Onclick(event) {
console.log(“Sending Msg…”)
$w(“#myHtmlComponent”).postMessage($w(“#textInput1”).value);
}
I figured it out. My page ground was BLACK and I guess the default text for the html was black. Changed my page BG to grey and I see that the code is working as expected.
Thanks for your help. Now to try and implement this in my orig page…i.e… assign the message value to a variable. I am unclear on how to do that. I still do not understand the SPAN and “theLabel”. My original html code contains an upload widget from cloudinary.com. What I am trying to do is pass a text string to this widget that gets assigned to their variable “tags”.
