webview里一定有h5吗
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webview里一定有h5吗相关的知识,希望对你有一定的参考价值。
参考技术A 有。webview与H5是相辅相成的,webview可以理解为我们手机上内嵌的一种浏览器,可以加载一些网页的页面,而H5可以理解成是html5,html5可以简单的理解成它是html的一种技术,webview可以加载html5。react native关于在ScrollView里使用WebView会有大片多余空白的问题
本人也是react native的菜鸟,下面只是说说解决方案,具体为什么可以实现目前还不懂。
我在项目里因为需求关系,在ScrollView里放置了WebView。
方法一:
一开始我按照网上的一些方法在js里的代码如下:
1 <ScrollView> 2 <WebView 3 ref={‘webview‘} 4 source={{ html: data.html }} 5 style={{ height: this.state.WebViewHeight }} 6 scrollEnabled = {false} 7 onNavigationStateChange={(title)=>{ 8 this.setState({ 9 WebViewHeight: (parseInt(title.title)) 10 }) 11 }} 12 onMessage={(e) => { 13 this.handleMessage(e) 14 }} 15 /> 16 ... 17 </ScrollView>
在data.html里的代码如下:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 </head> 6 <body> 7 ... 8 </body> 9 <script> 10 window.onload = function () { 11 window.location.hash = 1; 12 document.title = document.body.clientHeight; 13 } 14 </script> 15 </body> 16 </html>
但是这种方法,在从别的页面第一次跳到webView所在的页面时,webView的高度是没问题的,但是第二次的高度就不对了。
方法二:
后来我就想了另外一种方法,在js里的代码如下:
1 <ScrollView> 2 <WebView 3 ref={‘webview‘} 4 source={{ html: data.html }} 5 style={{ height: this.state.WebViewHeight }} 6 scrollEnabled = {false} 7 onMessage={(e) => { 8 this.handleMessage(e) 9 }} 10 onLoadEnd={this.webViewLoaded} 11 javaScriptEnabled={true} 12 /> 13 ... 14 </ScrollView>
就是我不采用onNavigationStateChange,而是通过onLoadEnd来改变height的值,onLoadEnd里调用的webViewLoaded函数代码如下:
1 webViewLoaded = () => { 2 console.log(‘loaded ‘, this.refs.myWebView); 3 this.refs.webview.injectJavaScript(` 4 const height = document.body.clientHeight; 5 window.postMessage(JSON.stringify({height: height})); 6 `); 7 }
在onMessage里调用的handleMessage监听传过来的height值,如下:
1 handleMessage = (e) => { 2 const data = JSON.parse(e.nativeEvent.data); 3 if (data.height) { 4 this.setState({ 5 WebViewHeight: data.height 6 }); 7 } 8 }
这种方法在调试阶段的时候,是没问题了,没有出现大片空白,加载情况也正常,但是在打包成apk后,页面里WebView的加载出正确的高度的速度变得极度缓慢。
方案三:
最后我这边的解决方案就是综合方案1和方案2:
如下:
1 <ScrollView> 2 <WebView 3 ref={‘webview‘} 4 source={{ html: data.html }} 5 style={{ height: this.state.WebViewHeight }} 6 scrollEnabled = {false} 7 onMessage={(e) => { 8 this.handleMessage(e) 9 }} 10 onNavigationStateChange={(title)=>{ 11 this.setState({ 12 WebViewHeight: parseInt(title.title) 13 }) 14 }} 15 onLoadEnd={this.webViewLoaded} 16 javaScriptEnabled={true} 17 /> 18 ... 19 </ScrollView>
这样在打包成apk后,WebView获取正确高度的时间就会短了,而且第二次进入也不会再出现多余空白的问题了。
以上是关于webview里一定有h5吗的主要内容,如果未能解决你的问题,请参考以下文章
因为手机设置字体大小导致h5页面在webview中变形的BUG