Hi israel, I described the bug in detail in the upper part of this thread. I’ll re-write it here:
I encounter the same bug I mentioned with the lightboxes, even after updating the code to the code you suggested-
"I updated the code to pass an object to the lightbox (copied and pasted the code you suggested) and the bug persists. same error: " comlink.ts:265 Uncaught (in promise) TypeError: Cannot read property ‘postMessage’ of null " I published it so you can check it out on the same link: https://hurryappnet.editorx.io/website-9
I still think it has something to do with the iframe and not the lightbox, simply because when passing data to the lightbox without using an iframe postMessage it works flawlessly. the updated code is the exact code you suggested.
thanks!"
Here’s a description original problem that persists in detail-
In order to recreate the problem, please follow the following steps:
-
Open the link above. make sure the developer console (debugger) is open in order to see the messages that are printed to the console.
-
Click on the button " Open Lightbox #1 ". the lightbox will open, a message from the iframe to the page will be printed to the console (handshake, to make sure the iframe is loaded) and then a message from the page to the iframe will be printed to the console.
-
Close the lightbox.
-
Click on “Open Lightbox #1” again (or alternatively click the second button “Open Lightbox #2”), the message from the iframe (handshake) will be received but postMessage will throw an error: " Uncaught (in promise) TypeError: Cannot read property ‘postMessage’ of null " therefore the message from the page to the iframe won’t be received.
Here’s the website’s code:
page code:
import wixWindow from 'wix-window';
$w.onReady(function () {
$w("#button1").onClick(function (event) {
wixWindow.openLightbox("myLightbox", {"msg": "button #1 message from page"});
});
$w("#button2").onClick(function (event) {
wixWindow.openLightbox("myLightbox", {"msg": "button #2 message from page"});
});
});
Lightbox code:
import wixWindow from 'wix-window';
$w.onReady(function () {
let received = wixWindow.lightbox.getContext();
let messageFromPage = received.msg;
// waiting for message from iframe ("handshake") before sending a message to it
$w("#myIframe").onMessage(function(event) {
let messageFromIframe = event.data;
if (messageFromIframe.type === "ready") {
console.log("message from iframe received - iframe ready");
$w("#myIframe").postMessage(messageFromPage);
}
});
});
iframe code (iframe is inside the lightbox):
<body onLoad="ready()">
<script type="text/javascript">
function ready(){
window.parent.postMessage({"type":"ready"}, "*");
}
window.onmessage = (event) => {
if (event.data) {
console.log("message from page received: " + event.data);
}
}
</script>
</body>
In addition, I attached 2 screenshots: 1. the console after the first time the lightbox opens (everything works) 2. the console after the second time the lightbox opens (postMessage throws an error).
so right now this bug persists!
thank you for your help.
