How to make a click on <a href="/selected-page"> in a htmlComp change the current page not just open that page in htmlComp?

Ask the community
,
1

Do i have to trigger an onMessage event to tell the page to go to selected page url? If so, how do i keep the htmlComp from trying to load the selected pages url?

2

If you created a button in a HtmlComponent, you can bind onClick event handler with a function that sends a message to the page on Velo.

Example

...

<script type="text/javascript">
     sendMessage = () => {
         window.parent.postMessage(
            "HELLO FROM THE HTML COMPONENT", 
            "*"
         );
     };
</script>

...
...

<button class="button" onclick="sendMessage()">SEND MESSAGE TO PAGE</button>

You can then handle the button click on the Page Code.

Example

import wixLocationFrontend from 'wix-location-frontend';

$w.onReady(() => {
    // Handle messages that the HTML Component sends to the page
    $w('#htmlComponent').onMessage((event) => {
        wixLocationFrontend.to("https://wix.com");
    });
});