react-native/Examples/UIExplorer/js/messagingtest.html
Jacob Parker abb8ea3aea Implement a postMessage function and an onMessage event for webviews …
Summary:
JS API very similar to web workers and node's child process.

Work has been done by somebody else for the Android implementation over at #7020, so we'd need to have these in sync before anything gets merged.

I've made a prop `messagingEnabled` to be more explicit about creating globals—it might be sufficient to just check for an onMessage handler though.

![screen shot 2016-09-06 at 10 28 23](https://cloud.githubusercontent.com/assets/7275322/18268669/b1a12348-741c-11e6-91a1-ad39d5a8bc03.png)
Closes https://github.com/facebook/react-native/pull/9762

Differential Revision: D4008260

fbshipit-source-id: 84b1afafbc0ab1edc3dfbf1a8fb870218e171a4c
2016-10-16 06:43:46 -07:00

29 lines
919 B
HTML

<!DOCTYPE html>
<html>
<head>
<title>Messaging Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=320, user-scalable=no">
</head>
<body>
<p>Messages recieved from React Native: 0</p>
<p>(No messages)</p>
<button type="button">
Send message to React Native
</button>
</body>
<script>
var messagesReceivedFromReactNative = 0;
document.addEventListener('message', function(e) {
messagesReceivedFromReactNative += 1;
document.getElementsByTagName('p')[0].innerHTML =
'Messages recieved from React Native: ' + messagesReceivedFromReactNative;
document.getElementsByTagName('p')[1].innerHTML = e.data;
});
document.getElementsByTagName('button')[0].addEventListener('click', function() {
window.postMessage('"Hello" from the web view');
});
</script>
</html>