react-native webview同h5、vue页面交互记录

reylen

于 2021-05-25 15:13:40 发布

阅读量647

点赞数

分类专栏： react-native

本文链接：https://blog.youkuaiyun.com/reylen/article/details/117256522

版权

react-native 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何在RN(Reduce Native)环境中，使用window和document对象进行H5和Vue的事件监听，以及两者间的通信方法。包括RN向H5发送消息、H5向RN的反馈机制，以及通过注入JavaScript实现双向通信的详细步骤。重点讨论了window和document的使用场景以及在不同平台上的差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   h5 或者vue添加监听
    /*
    * vue 监听采用
    * window.window.addEventListener   ios
    * window.document.addEventListener android
    * h5
    * window.addEventListener   ios
    * document.addEventListener  android
    * */

// 具体是用window还是document如上面描述
window.addEventListener('message', function (e) {
        let data = event.data;
        // let obj = JSON.parse(data);
        alert('event lst:' + data);
    })

h5 向 RN发送消息

window.ReactNativeWebView.postMessage(msg)  // msg 为string

RN向h5发送消息

this.webView.postMessage(msg);   // msg 为string

另外还可以用脚本同h5交互

RN端

this.webView.injectJavaScript(`receiveMessage("RN向H5发送消息");true;`)     // 网页为vue编写  
this.webView.injectJavaScript(`window.receiveMessage("RN向H5发送消息");true;`).   // h5

h5 注册方法

// vue
mounted(){ 
      window.receiveMessage = (msg) => {            //在window上挂载一个receiveMessage方法，RN会调用
           alert( msg)
      }
},

// h5
window.receiveMessage = (msg) => {
           alert( msg)
      }