index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>JS message</title>
    <script>
        function displayResponse(response) {
            responseField = document.getElementById("test-response");
            responseField.value = response.data;
        }

        function postWindowMessage(message) {
            window.postMessage(message);
        }

        window.addEventListener('message', displayResponse, false);

        window.onload = function () {
            var form = document.getElementById("message-form"),
            messageField = document.getElementById("test-message");

            form.onsubmit = function () {
                var message = messageField.value
                console.log(message);
                if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.messageHandler) {
                    window.webkit.messageHandlers.messageHandler.postMessage({
                        "message": message
                    });
                }
                return false;
            };
        };
    </script>
  </head>
  <body>
    <form id="message-form" action="/">
			<input type="text" id="test-message" value="Hello world!">
			<input type="submit" value="Post Message">
      <br>
      <input type="text" id="test-response" value="">
		</form>
  </body>
</html>