iFrame CSS Menu pass Variable to Parent

Ask the community
,
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;
}}