Menu
I can successfully send postMessage to WebView but my question is how can i extract json object from event.data. Is there any possible way to get json object
document.addEventListener("message", function(event) {
console.log("Received post message", event);//Get Event from React Native
alert(event.data);
}, false);
Following is the code:
import React, { Component } from 'react'
import { ScrollView, Button, WebView, View, TouchableHighlight, Text } from 'react-native'
import { connect } from 'react-redux'
class UserData extends Component {
constructor (props) {
super(props)
this.state = {}
}
render () {
let html = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" charset="utf-8"></script>
</head>
<body>
<div id="myContent">
</div>
</body>
</html>
`
let jsCode = `
document.addEventListener("message", function(event) {
console.log("Received post message", event);
alert(event.data);
}, false);
var data = [150, 230, 180, 90, 151, 55];
var svg = d3.select("#myContent") //used to display graph
.append("svg")
.attr("width", 900)
.attr("height", 2000);
svg.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr({
class : "bar",
width : function(d) {return d;},
height: "40",
y : function(d, i) {return i*50 + 10;},
x : "10"
});
`
return (
<View style={styles.container}>
<TouchableHighlight
onPress={() => this.sendPostMessage()}>
<Text>Send post message from react native</Text>
</TouchableHighlight>
<WebView
style={styles.webView}
ref={( webView ) => this.webView = webView}
html={html}
injectedJavaScript={jsCode}
javaScriptEnabled={true}
scrollEnabled={true}
>
</WebView>
</View>
);
}//End of Render
sendPostMessage() {
console.log( "Sending post message" );
var UserData={
UserName: "XYZ",
userid: "123456789"
}
this.webView.postMessage(UserData); //Post Message to WebView
}//End of Send Post Message function
}//End of Class
Does anyone know how to extract json-object in the WebView receiving from react-native
Documentation used : http://facebook.github.io/react-native/releases/0.46/docs/webview.html
i have tried
document.addEventListener("message", function(event) {
console.log("Received post message", event);//Get Event from React Native
alert(event.data);
alert(event.data.UserName);
}, false);
515
I think you must use JSON.stringify(), and then use it as the first argument in window.postMessage()
See docs : https://facebook.github.io/react-native/docs/webview.html#onmessage
window.postMessage accepts one argument, data, which will be available on the event object, event.nativeEvent.data. data must be a string.
108
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
