iFrame CSS Menu pass Variable to Parent

Ask the community
,
1

Ok I’ve been beating my head against a wall for 2 days and I finally have to break down and ask for help. I have an iFrame where I am using a slightly edited version of this radial CSS menu https://codepen.io/jcoulterdesign/pen/pjQdGb . The menu displays fine but I am trying to build click functionality where when I click a div menu item, a string (or any variable really) gets passed back to the parent Wix code so I can run a switch statement and filter the data table. For example, I click the “Air” menu option and Wix code filters my table to just Air sports. Ty!

The full page is: https://www.fullsendhq.com/sp

Here is my iFrame code (with a lot of style code taken out for easier reading)

<!DOCTYPE html>

<html>

    <head>

	<style type="text/css">

	/*CSS CODE*/

	</style>

<script>

    document.getElementsByTagName("h1")[0].style.fontSize = "80px";

</script>

<script type="text/javascript">

    function passThru(sp) {

	console.log(sp);

	window.parent.tableUpdate(sp);

}

</script>

	</head>

	<body>

            <div class='future_ui__piece'>

                <span>Air</span>

                <div class='line'></div>

                <div class='tip'>

		Air Sports

                </div>

		<div onclick='passThru("Air")'></div>

            </div>

     </body>

</html>

Here is my page code


import wixWindow from 'wix-window';
import wixData from 'wix-data';
let formFactor = wixWindow.formFactor;  // "Mobile"

function tableUpdate(sportselector){
switch (sportselector) {
case "Air":
$w("#listsports").setFilter(wixData.filter().contains("category", $w("#Air").id));
break;
case "Earth":
$w("#listsports").setFilter(wixData.filter().contains("category", $w("#Earth").id));
break;
case "Street":
$w("#listsports").setFilter(wixData.filter().contains("category", $w("#Street").id));
break;
case "Strength":
$w("#listsports").setFilter(wixData.filter().contains("category", $w("#Strength").id));
break;
case "Snow":
$w("#listsports").setFilter(wixData.filter().contains("category", $w("#Snow").id));
break;
case "Water":
$w("#listsports").setFilter(wixData.filter().contains("category", $w("#Water").id));
break;
default:
$w("#listsports").setFilter(wixData.filter().isNotEmpty("title"));
break;
}}
2

That window.parent.tableUpdate(sp); won´t work. The ONLY way to communicate in Wix with the iframe (aka html-component) is by using postMessage/onMessage. Please refer to the docs on the html-component or have a look at one of my contributions for a working example: https://girizano.wixsite.com/codecorner/post/html-component-not-running-in-publish-mode-google-sheets-example

3

I did try a bit to get onmessage to work prior to posting but I just gave it another shot as seen below with no luck. Any way someone can rework my code to show a valid connection? Once I have the HTML-component sending messages to the page I can take it from there. Thanks for the help so far.

iFrame Code

<!DOCTYPE html>

<html>

    <head>

		<script type="text/javascript">

		function passThru(sp) {

			console.log(sp);

			window.parent.postMessage(sp,"*");

		}

		</script>

    </head>

	

	<body>

            <div class='future_ui__piece'>

                <span>Air</span>

                <div class='line'></div>

                <div class='tip'>
                Air Sports

                </div>

                <div onclick='passThru("Air")'></div>

                </div>

	<body>

</html>

Page Code

import wixWindow from 'wix-window';
import wixData from 'wix-data';

export function cssMenu_message(event) {
let sport = event.data;
console.log(sport);
switch (sport) {
case "Air":
$w("#listsports").setFilter(wixData.filter().contains("category", "Air"));
break;
case "Earth":
$w("#listsports").setFilter(wixData.filter().contains("category", "Earth"));
break;
case "Street":
$w("#listsports").setFilter(wixData.filter().contains("category", "Street"));
break;
case "Strength":
$w("#listsports").setFilter(wixData.filter().contains("category", "Strength"));
break;
case "Snow":
$w("#listsports").setFilter(wixData.filter().contains("category", "Snow"));
break;
case "Water":
$w("#listsports").setFilter(wixData.filter().contains("category", "Water"));
break;
default:
$w("#listsports").setFilter(wixData.filter().isNotEmpty("title"));
break;
}}
4

You are missing quite an essential part on the Wix-part: listening with onMessage to the message from the html-comp sent with postMessage. Read the docs.

5

What do you mean? The function cssMenu_message(event) is the onMessage for the iFrame. When I added the onMessage event from the Wix editor that is the code it generated. I did read the docs many times that’s why I’m coming here for help.

6

He means assigning the event in code rather than the properties panel as shown in the documentation here. In theory both approaches should work but maybe you’ll have better luck this way.

https://www.wix.com/corvid/reference/$w.HtmlComponent.html#onMessage

7

To add to Lee’s post above, please check this Corvid support page too which is mentioned at the top of the HTML Component API.
https://support.wix.com/en/article/corvid-working-with-the-html-element

8

Like this? Still doesn’t seem to work. I read everything many times and went over my code over and over and I’m at a loss. I have no idea what I am missing.

Page Code Snippet

$w.onReady(function () {

$w("#cssMenu").onMessage( (event)=> {
let sport = event.data;
console.log(sport);
switch (sport) {.....

HTML Element Snippet

<script type="text/javascript">
	function passThru(sp) {
		console.log(sp);
		window.parent.postMessage(sp,"https://www.fullsendhq.com/");
	}
</script>