A few weeks ago I implemented into my wix site to get iFrame code from CMS and then posted it to a html component. Unfortunately it stopped working and I don’t know why.
This is my velo code:
$w.onReady(function () {
//To load the page before running the code
$w(“#dataSetBites”).onReady(function () {
$w(‘#dataSetBites’).onReady(()=>{
let item = $w(‘#dataSetBites’).getCurrentItem();
console.log("ITEM: ", item);
let newHtml = item.html;
console.log("HTMLCODE: ", newHtml);
$w(‘#htmlAnmeldung’).postMessage(newHtml) ;
})
})
});
And this is the code in my HTML component:
<html>
<head>
<script type="text/javascript">
function init(){
window.onmessage=(event)=>{
let receivedData = event.data;
if(receivedData){console.log("HTML Code Element received a message!");
console.log("receivedData: ", receivedData)
showMessage(receivedData);
} else{console.log("No data received!")};
}
}
function showMessage(msg){
document.getElementById('demo').innerHTML = msg;
sendReturnMessage("Message from the HTML Component!");
}
</script>
</head>
<body onload="init();">
<h1></h1>
<p id="demo">Message will go here</p>
</body>
</html>
I found out a bit more: It seems within the HTML Component the window.onmessage = (event) => { is called twice ( I debugged in my browser). First time getting to the breakpoint - all good, page is showing the correct iframe. When I let it run further window.onmessage = (event) => { is called another time, this is when [Object object] is being set as there is no message anymore. In my wix velo code I am only calling postMessage once.
Any ideas why this is happening (all of a sudden) and also how to avoid it?
I found out a bit more:
The issue is the window event in my html component being called twice. Also it’s a chrome issue, no idea what has changed around chrome to cause this. Also this only happens when I pass an iframe to the html component. Passing a simple string doesn’t lead to the listener firing twice.
I fixed it by checking the event data to be string (as the second call inserts the [Object object] thing.
If anyone has an explanation I would be happy to hear it.