首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >react本机webview postmessage不触发onmessage

react本机webview postmessage不触发onmessage
EN

Stack Overflow用户
提问于 2020-03-23 10:22:48
回答 1查看 1.8K关注 0票数 0

React原生版本:0.60

库使用:react-本机-webview(版本: 9.0.1)

发布

当我将postMessage (this.webView.postMessage('somedata'))从反应本机事件处理程序发送到webview时,onMessage不会被触发。但是onMessage确实会在由webview发送的事件中触发。

解决方案尝试了

同时添加了document.eventListener和window.eventListener。但是,当我从react本地onMessage postMessage时,还没有触发postMessage。

任何帮助都将不胜感激。

代码

代码语言:javascript
运行
复制
  // 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(',')
 }

EN

回答 1

Stack Overflow用户

发布于 2020-07-12 14:38:40

你好,您必须使用post消息作为injectedJavascript。例如,

代码语言: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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/60811667

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档