inner iframe message inside iframe

Ask the community
,
1

An iFrame (called my_iframe and which has an external domain inside when the user submits myform : Error ) is in an iFrame in my web; as can be seen in the code.

My_iframe returns (when the user is done with what it does inside it) a message with information. However, the eventlistener type message (underlined and in bold) never receives it. I have used window.open(‘https://www.google.com’, ‘_blank’); to visually know if any message is received: however, it never gets called when the inner iframe send the message.

Why am I not receiving the message? And, what can I do to get it?

RELEVANT CODE (inside wix html component):

<html>
	<head></head>
	<body>
		<form id="myform" method="POST" action="https://hpp.sandbox.addonpayments.com/pay" target="my_iframe">
			// some inputs and submit button...
		</form>

		<iframe name="my_iframe" width="100%" heigth="80%"> </iframe>
		
		<script type="text/javascript">
			var f = document.getElementById('myform');
			f.f1.value = "maec";
			(function() {
				// DOM is available
				window.onmessage = (event) => { 
				// this is a message from page code in Wix
        				if (event.data) { 
        					// the form data is actualised
					}
					window.open('https://www.google.com', '_blank'); // if any message event is received, google.com should launch
				}

				// addEventListener
				window.addEventListener('message', function (e) { 
    					window.open('https://www.google.com', '_blank'); // if any message event is received, google.com should launch
  				}); 
			})();
		</script>
</body>
</html>

This is how it visually looks (here you can see both iFrames -the inner one and the html component from wix-, and the form submit button):

672×717 15.6 KB

#iframe #htmlcomponent #message

2

Wix doesn’t provide support for html code that comes from a third party provider.
https://support.wix.com/en/article/using-iframes-to-display-visible-content-on-your-site

So in your case as it comes from https://hpp.sandbox.addonpayments.com, then you need to go back to this third party provider and ask them how to integrate it within Wix.

As for using html component, you can add code to pass data to and from the page to the html component and back again.
https://www.wix.com/corvid/reference/$w.HtmlComponent.html
https://support.wix.com/en/article/corvid-working-with-the-html-element

3

As Whisky, there’re many things you can’t do in the htmlComponent.
You cannot use: window.open ().

4

Hey thank you! So do you know if wix has limited cross origin messages?

5

Thank you! However, it does indeed work… If I use it outside of the message event it opens the window (moreover, the final code is not to open a window, i amb using it because it is a visually clear way to know if the message has been received!)…

6

@festivalu22bcn actually when I tested it, I tried to trigger it by event. I’ve never tried it outside the onmessage.

7

Try creating the element dynamically. i.e. :

document.body.onload = function() {
    let form = document.createElement('form');
    form.setAttribute('blah', 'foo');
    form.addEventListener('bar');
    document.body.appendChild(form);
    
    window.onmessage = function (msg) {
    //blah
    }
}
8

Thank you! But the messagevente doesn’t come frome the form, but from the inner iframe! I don’t see why should this work…

9

@jonatandor35 It does trigger outside… the problem is not receiving the message event from the inner iframe

10

@festivalu22bcn

https://www.sitepoint.com/community/t/can-i-use-iframe-inside-an-iframe/214310/5
you cannot nest “iframe elements” .
Or to be more precise you can, but why bother as only the
outer element will render and your code will fail validation.

https://stackoverflow.com/questions/15018738/how-to-use-the-nested-iframe-in-html
https://stackoverflow.com/questions/15343955/nested-iframes-aka-iframe-inception
https://stackoverflow.com/questions/41356100/how-to-refer-iframe-within-iframe

However, like said previous, Wix won’t provide you with support for third party code, so you really should be going back to your third party code provider and asking them how they integrate an iframe in an iframe into Wix.

11

@festivalu22bcn If any script fails, the rest will fail to render, including pending promises. And you won’t get any useful errors from the cdn hosted code. In other words, timing is key, and this solves that. If it’s the iframe, then build the iframe.