Ifram horizontal menu not interacting with the actual page

Ask the community
1

is there a way to make a custom code horizontal menu in a i frame interact with the page?

let say if i have anchor in the ifram the resonse happens withing the iframe container not the actual page lol

thanks

2

Hi, @anthony_yang !!

That depends on what you mean by “interact.” If your goal is to create something that deeply integrates with the Wix page, I recommend using a custom element instead of an iframe. However, if all you want to do is trigger something on the Wix page based on an event that occurs inside the iframe, then learning about postMessage() might be enough. Since iframes on Wix are completely isolated from the rest of the page, the only way to reflect something happening inside the iframe onto the Wix page is basically through postMessage() . :innocent:


/* * * * * * * * * * * * * * * * * * * * * * * * *
 * Paste the following into the HTML Component:  *
 * * * * * * * * * * * * * * * * * * * * * * * * *

<!doctype html>
<html>
<head>

<script type="text/javascript">
function init () {
  // when a message is received from the page code
  window.onmessage = (event) => {
    if (event.data) {
      console.log("HTML Code Element received a message!");
      insertMessage(event.data);
    }
  }
}

// display received message
function insertMessage(msg) {
  document.getElementById('demo').innerHTML = msg;
  sendReturnMessage("Message from the HTML Component!");
}

// send message to the page code
function sendReturnMessage(msg) {
  window.parent.postMessage(msg, "http://mysite.com");
}
</script>

</head>

<body onload="init();" style="background-color:lightgray;">
<h1>HTML Component Test</h1>
<p id="demo">Message will go here</p>
</body>
</html>

 * * * * * * * * * * * * * * * * * * * * * * * * *
 * This is the page code:                        *
 * * * * * * * * * * * * * * * * * * * * * * * * */

$w.onReady(function () {
  // when a message is received from the HTML Component
  $w("#myHtmlComponent").onMessage((event) => {
    console.log(`Message received by page code: ${event.data}`);
  });
});

export function messageSendButton_onClick() {
  // send message to the HTML Component
  $w("#myHtmlComponent").postMessage("Message from page code!");
}

This sample code was cited from the link below.