admin管理员组文章数量:1415445
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");
本文标签： reactjsHow to call JavaScript code injected into WebView of ReactNative in ReactStack Overflow
版权声明：本文标题：reactjs - How to call JavaScript code injected into WebView of ReactNative in React? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745174182a2646156.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论