javascript - react native webview postmessage不会触发onmessage
问题描述
反应本机版本:0.60
使用的库:react-native-webview(版本:9.0.1)
问题:
当我将 postMessage ( this.webView.postMessage('somedata')
) 从我的 react-native 事件处理程序发送到 webview 时,不会触发 onMessage。但是 onMessage 确实会在 webview 发送的事件上触发。
尝试的解决方案:
添加了 document.eventListener 和 window.eventListener。当我从 react-native 发布消息时,仍然不会触发 onMessage。
任何帮助将不胜感激。
代码:
// On Click, the following function will run
_sendPostMessage = () => {
//data sent to webview
this.webView.postMessage("getAuthToken");
}
// Inside render() function
<WebView
ref={(webView) => this.webView = webView}
style={styles.webView}
source={{ uri: event.ticket_form_url, headers: headers }}
injectedJavaScript={jsCode}
onMessage={this.onMessage}
renderLoading={this._renderActivityIndicator}
startInLoadingState={true}
/>
// Injected javscript code below
var jsCode = `
(function() {
window.postMessage = function(data) {
window.ReactNativeWebView.postMessage(data);
};
})()
(function() {
var originalPostMessage = window.postMessage;
var patchedPostMessage = function(message, targetOrigin, transfer) {
originalPostMessage(message, targetOrigin, transfer);
};
patchedPostMessage.toString = function() {
return String(Object.hasOwnProperty).replace('hasOwnProperty', 'postMessage');
};
window.postMessage = patchedPostMessage;
})();
window.addEventListener("message", function(event) {
var uat = ''
if (window.userAuthenticationToken) {
uat = window.userAuthenticationToken()
}
window.postMessage('setAuthToken,' + uat)
});
document.addEventListener("message", function(event) {
var uat = ''
if (window.userAuthenticationToken) {
uat = window.userAuthenticationToken()
}
window.postMessage('setAuthToken,' + uat)
});
`;
// onMessage
onMessage = (event) => {
//data received from webview
console.log('Reached onMessage', event.nativeEvent.data);
var response = event.nativeEvent.data
var data = response.split(',')
}
解决方案
您好,您必须使用 post message 作为注入的Javascript。例如,
<WebView
source={{ uri:'https://stackoverflow.com' }}
injectedJavaScript="window.ReactNativeWebView.postMessage(document.title)"
onMessage={event => setTitle(event.nativeEvent.data)}
/>
您可以将此包用于美容 UI 的 webview。 https://github.com/ilkerkesici/react-native-beauty-webview
推荐阅读
- css - CSS3 - 点击链接时的转换:翻译属性
- google-cloud-platform - 是否可以使 Cloud Storage 对象对通过应用程序进行身份验证的用户可见?
- acumatica - 如何在 Acumatica 报告中加粗部分文本
- node.js - EJS分配变量?
- regex - 提取仅包含英文名称的节点的值
- tensorflow - 如何在 TensorFlow 中检索 eval_metrics 的值
- javascript - 使用链中获取和 Promise.all 的多个 API 调用
- python - Python3.6上运行的Flask找不到htmlentitydefs?
- javascript - 从 Chrome 扩展访问 Javascript 上下文开发工具
- php - AWS 上的无服务器 PHP 与 bref 部署错误