作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试将 postmessage 用于在 React Native App 内的 webview 中打开的页面。我试了很多次,还是无法发送。
我可以正常收听网页消息。我只是无法寄回任何东西。
我目前正在使用 react-native-webview 11.6.5
export default function WebPage() {
const webviewRef = useRef();
const onMessage = (event) => {
//receive message from the web page. working here until here
const data = JSON.parse(event.nativeEvent.data);
//reply the message
webviewRef.current.postMessage(
JSON.stringify({reply: 'reply'}),
'*'
)
}
return <View>
<WebView
ref={webviewRef}
originWhitelist={['*']}
source={{ uri: 'https://robertnyman.com/html5/postMessage/postMessage.html' }}
domStorageEnabled
javaScriptEnabled
onMessage={onMessage}
/>
</View>
}
任何想法我做错了什么?
postMessage
至
injectJavaScript
.
onMessage
到以下几点:
const onMessage = (event) => {
const data = JSON.parse(event.nativeEvent.data);
//reply the message
webviewRef.current.injectJavaScript(
`window.postMessage(
{
reply: 'reply'
}
);`
)
}
最佳答案
将数据从应用程序发送到 webview
使用 injectedJavaScript
从 webview
发送数据应用程序使用 postMessage
在 webview
中接收数据数据由 postMessage
发送使用 onMessage
//this Js function will be injected into the web page after the document finishes loading.
//this function will Post a message to WebView.
const INJECTED_JAVASCRIPT = `(function() {
window.ReactNativeWebView.postMessage(JSON.stringify({key : "value"}));
})();`;
<WebView
source={{ uri: 'https://reactnative.dev' }}
injectedJavaScript={INJECTED_JAVASCRIPT}
onMessage={(event) => {
const data = JSON.parse(event.nativeEvent.data);
alert(data.key);
}}
/>;
关于reactjs - 如何在 React Native webview 中使用 PostMessage?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68334181/
我是一名优秀的程序员,十分优秀!