Hi, I am trying to use IFrame element from EditorX. However, it seems that I cannot postMessage from my Wix page to the IFrame element.
Here are the simplest code to reproduce the issue. On my Wix page, I added the following code:
$w.onReady(function () {
// periodically postMessage to the element
let pingTimer = setInterval(function() {
console.log('sending ping to iframe');
$w('#html1').postMessage({ type: "ping" });
}, 1000);
});
Then, on the iFrame element, I added the following code. I.e. I only added a handler for onmessage and output logs when a message is received.
<!DOCTYPE html>
<html>
<head>
<body>
<div id="counter">
</div>
<script type="text/javascript">
window.onload = (event) => {
console.error('inside window.onload');
window.onmessage = (event) => {
console.error('received ping: ', event.data);
};
};
</script>
</body>
</html>
Previewing the site is OK. I could see the 'received ping' logs as expected.
![](https://static.wixstatic.com/media/a27d24_c5298733360642ef94a005e6975abdbc~mv2.png/v1/fill/w_66,h_30,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/a27d24_c5298733360642ef94a005e6975abdbc~mv2.png)
But the ping is not received on the published site.
![](https://static.wixstatic.com/media/a27d24_c0636c6527e449edb45ec0085517bd60~mv2.png/v1/fill/w_47,h_16,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/a27d24_c0636c6527e449edb45ec0085517bd60~mv2.png)
Note that I have tried to use incognito window and clearing the browser cache. But it didn't help.
Also please note that it only happens on Editor X sites. The postMessage works well on the conventional editor sites.
Here is the live site that reproduces the issue:
https://opi544.editorx.io/iframetest
Thanks in advance for your help.
@Yisrael (Wix) @hurryapp.net
Yesterday, my site was completely broken, but seems due to other reasons: it uses router, and if the router call redirect it somehow stucked and the page is never redirected. It happened for the whole day.
if(!user.loggedIn) { // if user not logged-in, redirect to login or signup user if(page === loginPage || page === signupPage) return next(); console.log(`redirect to login page: ${loginPage}`); return redirect(loginPage); }
This morning everything works again. And the iframe problem I mentioned also disappears. However, when I checked the test site @hurryapp.net provided, the problem is still there.
So I am not sure what's going on. Probably wix is pushing some changes and when it slowly propagates, things are broken temporarily. But imagine if your service is already running, and suddenly it is broken for the whole day without notifications...
Hi Israel, I created a simple website just for you so you can recreate the problem easily. I get a similar error to Niko's with a slightly different use case.
website link:
https://hurryappnet.editorx.io/website-9 In order to recreate the problem, please follow the following steps: 1. Open the link above. make sure the developer console (debugger) is open in order to see the messages that are printed to the console. 2. 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.
3. Close the lightbox.
4. 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", "button #1 message from page"); }); $w("#button2").onClick(function (event) { wixWindow.openLightbox("myLightbox", "button #2 message from page"); }); });
Lightbox code:
import wixWindow from 'wix-window'; let messageFromPage; $w.onReady(function () { messageFromPage = wixWindow.lightbox.getContext(); // 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). Please let me know if you were able to recreate the bug! Thank you for your help
This appears to be related to a recent performance release. Niko, please try your site again.
Hurry and Niko, let me know if you have other sites with this issue so I can address the issue.
@hurryapp.net @Yisrael Hersch It seems that they fixed the issue. Unfortunately, it breaks another scenario as follows:
Go to the page with the iframe -> everything is OK, you can postMessage to iframe and receive messages from the iFrame
Click a button to move to another page (using Link or wixLocation)
On that page, click another button to move back to the first page (the page with the iframe)
Now you can no longer postMessage to the iFrame. The following errors is emitted:
comlink.ts:265 Uncaught (in promise) TypeError: Cannot read property 'postMessage' of null at Object.<anonymous> (platform.afd19439.chunk.min.js:1) at iframetest:105 at Object.next (iframetest:105) at c (iframetest:105) deserialize @ comlink.ts:265 w @ comlink.ts:519 Promise.then (async) apply @ comlink.ts:442 invokeSdkHandler @ clientWorker.ts:38 (anonymous) @ index.ts:60 (anonymous) @ index.ts:69 postMessage @ VM22:3 Object.keys.reduce.c.value.c.value.l.value @ withValidation.js:42 (anonymous) @ c1dmp.js:12 eval @ VM21:3 (anonymous) @ createRegisterEvent.ts:47 (anonymous) @ tslib.es6.js:100 (anonymous) @ tslib.es6.js:81 (anonymous) @ tslib.es6.js:74 s @ tslib.es6.js:70 (anonymous) @ clientWorker.a742ae92.bundle.min.js:1 n @ comlink.ts:312
It seems that the object returned when selecting the iframe (e.g. $w('#iframe')) is somehow returning null.
I put the movie demonstrating the issue here.
You can check the live site here:
https://opi544.editorx.io/iframetest
Hi Yisrael, thanks for the response.
Actually, my production site code has already the handshake in place. The problem is, the communication path between WIX and the iframe is never established no matter how long you wait (for both direction). I also tried to put extremely long timer (e.g. 1 minute) before trying to communicate, and it failed as well.
Preview/Live modes, and the Classic Editor / Editor X all have slightly different timing issues concerning the HtmlComponent. You need to do a bit of a handshake between the HtmlComponent and the Page to ensure both sides are ready before trying to communicate.
In your embedded code, you can "catch" the moment the script is ready, and notify the page that the embedded script is ready:
<body onLoad="ready()"> ... function ready(){ window.parent.postMessage({"type":"ready"}, "*"); }
In your page code, you can catch the message from the embedded script notifying the page that the embedded script is ready.
if(event.data.type === 'ready'){ // HtmlComponent script is ready }
Also in your page code, you can send a "ready" message to inform the embedded script that the page is ready. When both sides (the page, and the HtmlComponent embedded script) are both ready, then you can start passing messages with content between the page and the embedded script.
I have the exact same bug! I created a simple website like you to make sure it is a bug. did you find a solution/get support ???
thanks
Also, I think this problem appears just in this week, because around two weeks ago our code that uses postMessage to an iFrame working just fine.
Another finding. If you go to the page from another page (e.g. using link), then the iFrame can receive the postmessage.
I added the following page:
https://opi544.editorx.io/iframetest/test
in which you can click the button to go the the home page
https://opi544.editorx.io/iframetest
Here is the screen shot of chrome console. The postmessages are received by the the iframe now.