HTML: #html1

Text: #receivedMessages

Messages Received:

Button: #button1

Wix Page Component Code

// Configure message handler

$w.onReady(() => {

    $w('#receivedMessages').text = "Messages Received:\n";

  // when a message is received from the HTML Component

  $w("#html1").onMessage( (event, $w) => {

    addReceivedMessage(event.data);

  } );

    

    

} );

 

// Update received message log

function addReceivedMessage(message) {

    let newMessage = JSON.stringify(message);

    $w('#receivedMessages').text += '\n'+newMessage;

}

 

// Send message to html component

function sendMessage(action, message, payload) {

    if (action && message) {

        let theMessage = {action:message};

        if (payload) {

            theMessage.payload = payload;

        }

        $w('#html1').postMessage(theMessage);

    }

}

 

// Request OS Type from html component

export function button1_click(event, $w) {

    // Ask html component for OS

    sendMessage('action', 'OSInfo');

}

HTML Component Code

<!doctype html>

    <html>

        <head>

            <script type="text/javascript">

 

               window.addEventListener('message', (event) => {

                   if (event.data) {

                       processMessage(event.data);

                   }

              });

 

              function htmlComponentReady() {

                  sendAction('htmlComponentReady');

              }

 

              function initialization () {

                 // when a message is received from the page code

                 htmlComponentReady();

              }

 

             function sendAction(action, payload) {

                sendMessageToWixPage(action, 'action', payload);

            }

 

             function sendMessageToWixPage(message, type, payload) {

                let key = (type ? type : 'error');

                if (message) {

                     let theData = {};

                     theData[key] = message;

                     if (payload) {

                         theData.payload = payload;

                     }

                    window.parent.postMessage(theData, '*');

               }

          }

 

          function sendError(error) {

             sendMessageToWixPage(error);

          }

 

          function getOSInfo () {

             // This script sets OSName variable as follows:

             // "Windows" for all versions of Windows

             // "MacOS" for all versions of Macintosh OS

             // "Linux" for all versions of Linux

             // "UNIX" for all other UNIX flavors

             // "Unknown OS" indicates failure to detect the OS

             let OSName = "Unknown OS";

             let navigator = window.navigator;

             if (navigator.appVersion.indexOf("Win") !== -1) {

                 OSName = "Windows";

             }

 

             if (navigator.appVersion.indexOf("Mac") !== -1) {

                 OSName = "MacOS";

             }

 

             if (navigator.appVersion.indexOf("X11") !== -1) {

                 OSName = "UNIX";

             }

 

             if (navigator.appVersion.indexOf("Linux") !== -1) {

                 OSName = "Linux";

             }

            return OSName;

       }

       function processMessage(message) {

          if (message['action']) {

 

              let action = message.action;

              switch (action) {

                    case 'OSInfo':

                    { 

                        logStatus('OSInfo');

                        sendAction('OSInfo', getOSInfo());

                    }

                    break;

 

                   default:

                   {

                      logStatus('No Action');

                   }

                  break;

            }

       }

    }

 

</script>

 

</head>

 

<body onload="start();">

    <p>HTML Component Loading...</p>

 

    <div id='theStatus'></div>

    <script type="text/javascript">

 

    function logStatus(statusInfo) {

         let message = document.getElementById('theStatus').innerHTML;

         document.getElementById('theStatus').innerHTML = message +'<br>' +statusInfo;

   }

 

   function start () {

        if (document.readyState === "complete") {

            initialization();

       }

    }

 

  </script>

</body>

 

</html>

© 2018 by Steve Cropper. Proudly created with Wix.com

  • Google+ - White Circle
  • Facebook - White Circle
  • Twitter - White Circle
This site was designed with the
.com
website builder. Create your website today.
Start Now