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>
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: