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: ":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>
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>
2 Answers
Reset to default 3Look 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 ments, 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);
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");