react-native-web-webview/docs/stories/onMessage.html at ebc1e2a279b31a0db864e4b43f500a4701f2d51b · react-native-web-community/react-native-web-webview · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
  <body>
    <h1>Hello world!</h1>
    <button id="button">Send message</button>
    <script type="text/javascript">
      // React Native
      function onBridgeReady(cb) {
        if (window.postMessage.length !== 1) {
          setTimeout(function () {
            onBridgeReady(cb);
          }, 100);
        } else {
          cb();
        }
      }

      var payload = JSON.stringify({
        name: 'WebView',
      });

      function onClick() {
        if (window.opener) {
          // Web new window
          window.opener.postMessage(payload, window.opener.origin);
          window.close();
        } else if (window.parent) {
          // Web iframe
          window.parent.postMessage(payload, window.parent.origin);
        } else {
          // React Native
          onBridgeReady(function () {
            window.postMessage(payload);
          });
        }
      }

      document.getElementById('button').addEventListener('click', onClick);
    </script>
  </body>
</html>