Contents - Index - Top


VB6 - Web message example

 

File(s): frmWebMessageDemo.frm, html\WebMessage.html

 

In the web message demo we use html5 web messages to communicate between Visual Basic and the html page.

You can read more about web messages here: MDN postMessage.

 

The html page looks like:

<!DOCTYPE html>

<html>

<head>

   <meta charset="utf-8" />

   <link rel="StyleSheet" href="WebMessage.css" type="text/css"> 

        <script>

 

            function sendString(){

                const textData = document.getElementById("data");

                if(textData && window.chrome.webview){

                    window.chrome.webview.postMessage(textData.value);

                }

            }

 

            function sendJSON(){

                const textData = document.getElementById("data");

                if(textData && window.chrome.webview){

                    let msg = { name : "Bob", age : 38, comment : textData.value};

                    window.chrome.webview.postMessage(msg);

                }

            }

 

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

                const textData = document.getElementById("data");

                if(textData){

                  if (typeof event.data === 'object' || typeof event.data === 'null' ) {

                    textData.value = JSON.stringify(event.data);

                  }

                  else {

                    textData.value = event.data;

                  }

                }

            });

 

        </script>

</head>

<body>

<section class="container">

 

    <p>Send data between HOST application and control via messages</p>

    <textarea id="data">Text that you want to sent to the application hosting the browser control.</textarea>

    <div>

       <span>

         <button id="postString" onclick="sendString();">Post String</button>

       </span>

       <span>

         <button id="postJSON" onclick="sendJSON();">Post JSON</button>

       </span>

    <div>

 

</section>

    

</body>

</html>

 

The "Post String" button has the following code:

 

Private Sub PostStringButton_Click()

  Dim Message As String

  

  Message = StringTextBox.Text

  EdgeWebBrowser.PostWebMessageAsString Message

End Sub

 

Which sets the textData.value in the html above via the event listener for message.

 

The "Post JSON" button does something similar.

 

Private Sub PostJsonButton_Click()

  Dim Json As String

  Json = JsonTextBox.Text

  EdgeWebBrowser.PostWebMessageAsJson Json

End Sub

 

Communication the other way around from the html page to the Visual Basic application is via the javascript postMessage and is triggered via function sendString() or function sendJSON()

Either one raises the event OnWebMessageReceived, which has the following code:

 

Private Sub EdgeWebBrowser_OnWebMessageReceived(ByVal URI As String, ByVal MessageAsJson As String, ByVal MessageAsString As String)

  Dim Content As String

  If Trim(MessageAsJson) <> "" Then

    JsonTextBox.Text = JsonTextBox.Text & vbCrLf & MessageAsJson

  End If

  If Trim(MessageAsString) <> "" Then

    StringTextBox.Text = StringTextBox.Text & vbCrLf & MessageAsString

  End If

End Sub

 


AntView - The MS Edge WebView2 ActiveX control Date last changed: 09/30/2024