I am trying to implment: https://www.wix.com/corvid/reference/$w.HtmlComponent.html#postMessage
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(); }
=======================
HTML code:
<!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!");
insertMessage(event.data);
}
}
}
// display received message
function insertMessage(msg) {
document.getElementById('dashNo').innerHTML = msg;
sendReturnMessage("Message from the HTML Component!");
}
// send message to the page code
function sendReturnMessage(msg) {
window.parent.postMessage(msg, "*");
}
</script>
</head>
<body><center>
<div id="inline_container"></div>
<script src="//widget.cloudinary.com/global/all.js" folder=--Staging-Area type="text/javascript"></script>
<script>
cloudinary.openUploadWidget(
{
cloud_name: 'cvoa',
upload_preset: '*********',
folder: '--StagingArea',
inline_container: "#inline_container",
keep_widget_open: false,
cropping_show_dimensions: true,
sources: ['local'],
tag: 'msg'
},
function(error, result) {
console.log(error, result);
if (result != null)
$('#inline_container').html(""); // Will remove the widget after successful upload
}
);
</script>
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".
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); }
toString() if it is primitive types, JSONstringify() if it's more complex :)
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....
If you send text it will work fine, if you want to send number values then you will have to string the numbers to text, so that the number is changed to a type string as it states.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString
https://www.w3schools.com/jsref/jsref_tostring_string.asp
OK. Created a Test Page following the example given in doc: https://support.wix.com/en/article/corvid-working-with-the-html-element
Page code as taken from doc:
$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); }
===================
Html code:
<html>
<head>
<style>
.button {
background-color: #155DE9;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
font-family: 'Arial';
}
.label {
font-family: 'Arial';
}
.input {
font-size: 14px;
}
</style>
<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>
</head>
<body>
<span id="theLabel" class="label">HTML Label</span>
<br/><br/>
<button class="button" onclick="button_click()">< Send Message</button>
<br/><br/>
<input type="text" class="input" id="theMessage">
</body>
</html>
=======================================================
PAGE DOES NOT WORK! NO MESSAGES WILL SEND EITHER WAY!!!
=======================================================
Java Developer console log:
Why of course I did. I guess I need to simplify and try the exact code in the example in a test page.
Have you also read the actual Wix Support page about it too?
https://support.wix.com/en/article/corvid-working-with-the-html-element