WebView 学习笔记

最新推荐文章于 2024-09-13 11:31:49 发布

BIGGGFISH

最新推荐文章于 2024-09-13 11:31:49 发布

阅读量459

点赞数

分类专栏：安卓开发UI 文章标签： webview 缓存

本文链接：https://blog.csdn.net/BIGGGFISH/article/details/53895464

版权

安卓开发UI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

WebView介绍

Zoom 放大缩小

为了支持Zoom，需要设置WebSetting.setBuiltInZoomControls

Note:如果你为WebView的宽或者高任意一个WRAP_CONTENT会得不到想要的效果，所以尽量避免。

1.每个应用又自己的cache和Cookie store
2.而且默认是不支持打开多窗口的，当然你可以自定义这个行为。

Building web pages to support different screen densities

有些属性可以帮助适配

1.The window.devicePixelRatio DOM property.
2.The -webkit-device-pixel-ratio CSS media query.

HTML5 Video support

In order to support inline HTML5 video in your application you need to have hardware acceleration turned on.

如果需要使用 html5 的video 需要打开硬件加速

Full screen support

为了支持全屏，不管是video还是其他的html内容。你需要重写WebChromeClient，并重写onShowCustomView(View, WebChromeClient.CustomViewCallback)和onHideCustomView() 方法。如果有一个方法没有实现，那么WebView就不会支持全屏。而且你也可以重写getVideoLoadingProgressView()方法为vedio一个进度条。

HTML5 Geolocation API support

在Android N之后定位api只支持安全的请求方式比如https。
如果应用请求定位Api通过一个不安全的方式，将会自动的被拒绝，如果没有重写onGeolocationPermissionsShowPrompt(String, GeolocationPermissions.Callback)方法的话。

Layout size

在设置WebView的高度的时候推荐使用MATCH_PARENT来代替WRAP_CONTENT,如果使用MATCH_PARENT为WebView设置高度，那么WebView的父View也不能设置WRAP_CONTENT,否则无法测量正确的高度。

为WebView高度设置为WRAP_CONTENT出现以下几种行为：

必须设置HTML body高度为一个固定值。这就意味着如果设置body为一个相对的高度，那么高度计算可能不正确。
在应用版本 KITKAT（4.4）和之前的版本上， the HTML viewport meta tag将不会被保留为了向后的兼容性。

而且为WebView的Width设置Width是无效的，它的宽度将有它的parent来决定。

///

Building Web Apps in WebView

Using JavaScript in WebView
- 首先打开javascript支持
```
WebView mWebView = (webView)findViewById(R.id.webview);
WebSetting webSetting = mWebView.getSettings();
webSetting.setJavaScriptEnabled(true);
```
WebSetting提供了一些有用的设置。例如如果你使用WevView来构建你的app，你可以通过setUserAgentString()来自定义User agent。然后服务器通过判断User Agent就能判断是否是从你自己的app中请求的了。
- 接着绑定JavaScript代码到android 代码
  想要绑定一个新的接口在JavaScript和Android代码之间，需要调用addJavaScriptInterface，在你需要JavaScript调用的方法之前。

例如：

public class WebAppInterface {
    Context mContext;

    /** Instantiate the interface and set the context */
    WebAppInterface(Context c) {
        mContext = c;
    }

    /** Show a toast from the web page */
    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

警告： 如果你设置你的targetSdkVersion为17或者更高，你必须设置@JavascriptInterface 给你任何一个你想要在JavaScript中调用的方法。而且这些方法必须是public的。如果你不设置在andorid4.2或者更高的系统上这些方法是不会被网页调用到的。

上面这段代码 WebAppInterface类允许网页创建一个Toast，并调用showToast()方法。

然后你可以绑定这个类给JavaScript使用，在WebView中使用addJavascriptInterface()并且给接口命名,例如Android。

WebView webView = (WebView) findViewById(R.id.webview);
webView.addJavascriptInterface(new WebAppInterface(this), "Android");

这样就在WebView中创建了一个名字为Android的接口供JavaScript调用。

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />

<script type="text/javascript">
    function showAndroidToast(toast) {
        Android.showToast(toast);
    }
</script>

这样就可以是用网页调用android代码。

你不需要初始化这个Android接口。因为WebView会自动的提供个网页使用。

Note：这个绑定给JavaScript的运行在其他的线程，而不是运行在构建这个对象的线程。

警告： 使用addJavascriptInterface()允许JavaScrip控制Android程序。这样当然是非常有用的，但是也是非常危险的。如果加载到WebView中的Html是攻击者的，那么他可以调用你原生代码中的任意方法。如果一定要注意代码注入和防止用户跳转到别的网页上去。

注意事项

在使用webview嵌套h5的时候，出现了问题，就是偶尔出现缓存的css加载不出来。只有html能加载出来。而且是在不同的的手机上的效果不一样。而且如果从缓存中加载了数据，就不会又报错的判定。

我的webview设置缓存地址：
getApplicationContext().getCacheDir().getAbsolutePath();
但是并没有用。
之后将缓存地址换为
getApplicationContext().getDir(“cache”, Context.MODE_PRIVATE).getPath(); 然后效果就好多了。

而在setAppCachePath(String appCachePath);的介绍中并没有看出什么。

/**
* Sets the path to the Application Caches files. In order for the
* Application Caches API to be enabled, this method must be called with a
* path to which the application can write. This method should only be
* called once: repeated calls are ignored.
*
* @param appCachePath a String path to the directory containing
* Application Caches files.
* @see #setAppCacheEnabled
*/

不知道是什么鬼。

2.然后就是webview 头部又一个js swiper插件，和webview外层的SwipeRefreshlLayout发生了冲突，当左右滑动swiper的时候，如果稍微向下就会出现，swiper停止的问题。然后我对SwiperRefreshLayout的进行稍微的定制。

3.然后就是webview缓存模式的选择。
缓存模式(5种)
LOAD_CACHE_ONLY: 不使用网络，只读取本地缓存数据
LOAD_DEFAULT: 根据cache-control决定是否从网络上取数据。
LOAD_CACHE_NORMAL: API level 17中已经废弃, 从API level 11开始作用同LOAD_DEFAULT模式
LOAD_NO_CACHE: 不使用缓存，只从网络获取数据.
LOAD_CACHE_ELSE_NETWORK，只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。

最后选择的模式，是根据加载前的网络状态进行调整。如果有网选择 LOAD_DEFAULT模式
如果没有网，则选择LOAD_CACHE_ELSE_NETWORK。