Reputation: 361
I injected a piece of JS code into WebView in React-Native. I want to call this js code on my web page (using React), just like using the API in the program, but I failed.
This is my current code:
const WebAPICode = `
function test() {
alert('Hello');
}
`;
export default class PluginView extends Component {
render() {
return (
<View {...this.props}>
<WebView
ref={webView=> this.webView = webView}
originWhitelist={['*']}
source={{ uri: "http://10.0.2.2:3000/" }}
onLoadEnd={()=>this.webView.injectJavaScript(WebAPICode)}
/>
<Text>{WebAPICode}</Text>
</View>
);
}
}
I want to call it in React
, but this is obviously the wrong way. I still don't know how to implement it after checking a lot of information.
function App() {
return (
<span onClick={()=>test()}>test</span>
);
}
Just like the setTimeout function, there is no such function in the js standard, but the browser adds it to the window object, window.setTimeout, and I also want to add my own defined function to the webview, just like test.
Inject the test function into this webview instead of writing it in the script tag.
<html lang="en">
<head>
<script>
// The function is defined here, but I want this
// definition to be injected into the browser
function test() {
alert('hello');
}
/**
* This is what I want:
* <WebView injectedJavaScript={`function test() {
* alert('hello');
* }`}/>
* Inject the test function into this webview instead
* of writing it in the script tag.
*/
</script>
</head>
<body>
<script>
test();
</script>
</body>
</html>
Upvotes: 0
Views: 7448
Reputation: 13924
Look at the official document of the webview
and see how to use it. Always refer to official documents when writing modules.
You can use this
const WebAPICode = `alert('Hello')`;
...
<WebView
ref={webView=> this.webView = webView}
originWhitelist={['*']}
source={{ uri: "http://10.0.2.2:3000/" }}
javaScriptEnabled={true}
injectedJavaScript={WebAPICode}
/>
If you have this function on your web, you can call it.
<html>
<head>
<script language="javascript">
function test()
{
alert('Hello');
}
</script>
</head>
<body>
...
const WebAPICode = `test()`;
...
<WebView
ref={webView=> this.webView = webView}
originWhitelist={['*']}
source={{ uri: "http://10.0.2.2:3000/" }}
javaScriptEnabled={true}
injectedJavaScript={WebAPICode}
/>
To execute the data shown in the comments, you have to do this.
Your webview page do this
var data = {name: "getname"}
window.ReactNativeWebView.postMessage(data);
handleMessage(e) {
//여러 데이터가 리스트 형식으로 올때
let parsedata = JSON.parse(e.nativeEvent.data);
message = parsedata.name
if(message == "get name") {
const data = { name: "John" }
this.webview.postMessage(JSON.stringify(data));
}
}
<WebView
ref={webview => (this.webview = webview)}
onMessage={mssage => this.handleMessage(mssage)}
}
Receive webview page
document.addEventListener("message", function(event) {
console.log("Received post message", event);
test(event.data);
}, false);
Upvotes: 3
Reputation: 108
You can call postMessage from webview and set your webview onMessage props like this.
onMessage={event => { console.log(event) } }
In your webview html:
window.ReactNativeWebView.postMessage("Your Message");
Upvotes: 1