react-native-webview与vue页面通信问题？

  • Z时代
  • 2024-03-16
  • 分类：IT

react-native项目中使用react-native-webview嵌入vue页面，两种方式,在不同机型上无效.

方式一:直接使用window.postMessage(例如在 vivo z3手机(android9) 上vue页面监听方法不执行)

rn页面:
      function injectJavascriptFun(params) {
        const str = `(function() {
          window.postMessage(1); 
       })()`;
        injectJavaScript(str);
      }
vue页面:
  window.addEventListener('message', (event) => {})

方式二:使用window.WebViewBridge.onMessage(例如在 小米手机(android13) 上vue页面监听方法不执行)

rn页面:
 function injectJavascriptFun(params) {
      const str = `(function() {
       window.WebViewBridge.onMessage(${JSON.stringify(params)});
      })()`;
      injectJavaScript(str);
    }
    injectJavascriptFun(sendData);
vue页面:
  window.WebViewBridge = {
    onMessage:function (data){
      store.commit('user/setRNWebview', data)
    }
  }
  const event = new Event('WebViewBridge')
  window.dispatchEvent(event);

以上两种方式在其他一些测试机例如iphone15pro、一加（android13），华为手机上都生效，该用什么区分调用两种方法呢？

回答：

如果两个项目跨域了,那么通讯肯定是不行的,你只要保证两个项目没跨域,解决方案就很容易

以上是 react-native-webview与vue页面通信问题？ 的全部内容， 来源链接： utcz.com/p/935301.html

回到顶部