rn webview 显示html,使用react-native-webview实现RN和H5中iframe的通信

先说说业务场景,在A.html中使用iframe引入了B.html,现在需要在APP中使用webview引入A.html,并且在点击B.html页面的某一处与RN进行通信。查看react-native-webview的RN和web页面的通信,通信时官方文档和插件是有区别的。

html向RN发送信息:

window.ReactNativeWebView.postMessage(msg)复制代码

RN向H5发信息

const run = ` true;`;setTimeout(() => {this.webview.injectJavaScript(run);//RN通过向H5页面添加js的方法向H5页面传递信息}, 3000);return( { this.webview = webview; }} onMessage={(event) => { alert(event.nativeEvent.data) }) }} onLoadEnd={() => { this.webview.postMessage('RN向H5发送的消息'); }} />)复制代码

但是我们的业务场景是点击在A.html中的B.html进行通信,这个时候就要在A和B两个页面通信;

A.html:

我就是一个栗子
复制代码

B.html

点我发送消息
复制代码
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值