使用react-native-webview實現RN和H5中iframe的通訊

時間 2019-12-05

標籤使用 react native webview 實現 h5 iframe 通訊欄目 React 简体版

原文原文鏈接

先說說業務場景，在A.html中使用iframe引入了B.html,如今須要在APP中使用webview引入A.html,而且在點擊B.html頁面的某一處與RN進行通訊。查看react-native-webview的RN和web頁面的通訊，通訊時官方文檔和插件是有區別的。javascript

html向RN發送信息：html

window.ReactNativeWebView.postMessage(msg)複製代碼

RN向H5發信息
java

const run = ` true;`;setTimeout(() => {this.webview.injectJavaScript(run);//RN經過向H5頁面添加js的方法向H5頁面傳遞信息}, 3000);return(<View style={{flex:1,backgroundColor: '#fcfcfc',paddingTop:20}}><WebView      source={{uri: 'http://192.168.21.123:88/'}}      style={{marginTop: 20}}      javaScriptEnabled={true}     startInLoadingState={true}     ref={(webview) => { this.webview = webview; }}     onMessage={(event) => {       alert(event.nativeEvent.data)      }) }}       onLoadEnd={() => {        this.webview.postMessage('RN向H5發送的消息');  }} />）複製代碼

可是咱們的業務場景是點擊在A.html中的B.html進行通訊，這個時候就要在A和B兩個頁面通訊；react

A.html:git

<body><div>我就是一個栗子</div><iframe src="btn.html" frameborder="0"></iframe></body><script type="text/javascript">      function getMsg(msg) {               window.ReactNativeWebView.postMessage(msg)      }</script>複製代碼

B.html
github

<body><div class="btn">點我發送消息</div></body><script>        $('.btn').click(function () {                window.parent.getMsg('我是iframe')           });</script>複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。