React Native WebView 内点击事件获取onNavigationStateChange、onMessage
2017-03-31 10:06
2216 查看
React Native WebView 内点击事件获取
问题描述:在RN的WebView里边,很多时候需要获取一个点击事件,来操作原生代码处理一些事情。可以使用onNavigationStateChange、onMessage来解决
代码
通过onNavigationStateChange :官方文档是这么写的Function that is invoked when the WebView loading starts or ends.那么这个方法到底是做什么的呢?<WebView onNavigationStateChange={(event)=>{console.log(event)}} style={{flex:1}} source={{html:this.state.Html}} /> console log:这个输出是刚进入webview这个页面的输出 { target: 809, canGoBack: false, loading: false, title: '', canGoForward: false, navigationType: 'other', url: 'about:blank' } 当点击webview中的一个跳转按钮会输出如下: { target: 809, canGoBack: false, loading: false, title: 'tab2', canGoForward: false, navigationType: 'click', url: 'a.html' } //这个a.html就是我们刚才点击的链接要访问的地址
其中不难发现,我们刚进入webview的时候 navigationType 为other,而点击跳转的时候则为click,好吧说到这里,估计大家都应该明白这个方法是做什么了。注意:这个方法无法阻止页面的跳转行为,所以大家只能通过这个方法获取用户的一些行为。从而做出判断。
但有很多情况,我们都是想,获取到这个行为,传值到RN再做其他事情,下面就做一个简单的例子onMessage。官方文档是这样描述的:
A function that is invoked when the webview calls window.postMessage. Setting this property will inject a postMessage global into your webview, but will still call pre-existing values of postMessage.
window.postMessage accepts one argument, data, which will be available on the event object, event.nativeEvent.data. data must be a string.
可以看出,这个方法用来和RN进行交互,必须注意的就是 当webview显示的页面中有 postMessage的同名函数时将会报错。
onMessage(func)
/*RN中*/ <WebView onNavigationStateChange={(event)=>{console.log(event)}} onMessage={(event)=>{console.log(event.nativeEvent)}} style={{flex:1}} source={{html:this.state.Html}} /> /*html中*/ <a href='javascript:postMsg()'> /*html中javascript,webview显示的html中一个a标签,调用postMsg,通过window.postMessage 传递123这个字符串到RN中。*/ <script>function postMsg(){window.postMessage('123')}</script> console log:当点击a标签的时候后台会出现如下输出 /*onNavigationStateChange log */ { target: 808, canGoBack: false, loading: false, title: 'tab2', canGoForward: false, navigationType: 'other', url: 'react-js-navigation://postMessage?123' } /* onMessage log*/ { target: 808, canGoBack: false, data: '123', loading: false, title: 'tab2', canGoForward: false, url: 'about:blank' }
估计大家看到这里 应该脑洞大开了,这样在RN中就能够获取 标签、用户行为、交互数据。
相关文章推荐
- React Native WebView 内点击事件获取onNavigationStateChange、onMessage
- WebView 获取网页点击事件
- React-Native - 使用AppState获取App运行状态(以及监听状态改变事件)
- web view的图片添加点击事件,和获取所有图片链接
- iOS 与HTML5交互之捕捉HTML5按钮点击事件,获取webview上按钮的点击事件
- Preserving the state of an Android WebView on screen orientation change
- WebView的一些基础设置,避免获取不到点击事件
- Preserving the state of an Android WebView on screen orientation change
- react native中使用react-native-viewpager实现的商品展示添加点击事件
- NavigationView中获取headerLayout实现点击事件的方法
- 调用js代码获取webView页面中的所有图片及点击事件
- webview 获取html中所有的图片资源并给图片添加点击事件
- NavigationView获取头像点击事件
- iOS 与HTML5交互之捕捉HTML5按钮点击事件,获取webview上按钮的点击事件
- iOS WebView 如何通过js获取网页中所有图片并加入点击事件,实现浏览图片的功能
- 云飞的获取webview视频点击事件方法
- 进击的KFC:iOS WebView 如何通过js获取网页中所有图片并加入点击事件,实现浏览图片的功能
- 开发笔记:解决安卓GestureOverlayView手势和ListView点击事件、文本框获取焦点冲突的问题
- iOS 为自定义tableView添加button点击事件后获取其序号
- android webview js交互, 响应webview中的图片点击事件