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页面嵌套到app里,js可以用window吗

RN中webview的一些思考

因为手机设置字体大小导致h5页面在webview中变形的BUG

H5混合开发

关于h5页面内嵌到andriod时的webview在设置缩放问题

手把手教你构建 Android WebView 的缓存机制 & 资源预加载方案