android webView的使用

最新推荐文章于 2024-03-18 18:35:32 发布

暴走邻家

最新推荐文章于 2024-03-18 18:35:32 发布

阅读量497

点赞数

分类专栏： android 文章标签： android android studio webview app html

本文链接：https://blog.csdn.net/bzlj2912009596/article/details/71600261

版权

android 专栏收录该内容

311 篇文章 16 订阅

订阅专栏

昨天，自己用到了webView加载本地文件的内容，当时有很多内容忘记了，所以在网上查找了资料。今天，自己又查找了webview的资料，把这个知识点记录一下，避免以后再去查找资料。

文章目录

1. 简介

WebView是一个基于webkit引擎、展现web页面的控件。

Android的Webview在低版本和高版本采用了不同的webkit版本内核，4.4后直接使用了Chrome

2. 作用

显示和渲染Web页面
直接使用html文件（网络上或本地assets中）作布局
可和JavaScript交互调用

WebView控件功能强大，除了具有一般View的属性和设置外，还可以对url请求、页面加载、渲染、页面交互进行强大的处理。

3. 使用介绍

一般来说Webview可单独使用，可联合其子类一起使用，所以接下来，我会介绍：

Webview自身的常见方法；
Webview的最常用的子类
（WebSettings类、WebViewClient类、WebChromeClient类)
Android和Js的交互

这里的内容非常的多，所以我只简单介绍WebSettings类，其他的大家有兴趣可以自己去网上看看。

//声明WebSettings子类
WebSettings webSettings = webView.getSettings();

//如果访问的页面中要与Javascript交互，则webview必须设置支持Javascript
webSettings.setJavaScriptEnabled(true);  

//支持插件
webSettings.setPluginsEnabled(true); 

//设置自适应屏幕，两者合用
webSettings.setUseWideViewPort(true); //将图片调整到适合webview的大小 
webSettings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小

//缩放操作
webSettings.setSupportZoom(true); //支持缩放，默认为true。是下面那个的前提。
webSettings.setBuiltInZoomControls(true); //设置内置的缩放控件。若为false，则该WebView不可缩放
webSettings.setDisplayZoomControls(false); //隐藏原生的缩放控件

//其他细节操作
webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //关闭webview中缓存 
webSettings.setAllowFileAccess(true); //设置可以访问文件 
webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口 
webSettings.setLoadsImagesAutomatically(true); //支持自动加载图片
webSettings.setDefaultTextEncodingName("utf-8");//设置编码格式

常见用法：设置WebView缓存

当加载 html 页面时，WebView会在/data/data/包名目录下生成 database 与 cache 两个文件夹
请求的 URL记录保存在 WebViewCache.db，而 URL的内容是保存在 WebViewCache 文件夹下
是否启用缓存：

 //优先使用缓存: 
    WebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); 
        //缓存模式如下：
        //LOAD_CACHE_ONLY: 不使用网络，只读取本地缓存数据
        //LOAD_DEFAULT: （默认）根据cache-control决定是否从网络上取数据。
        //LOAD_NO_CACHE: 不使用缓存，只从网络获取数据.
        //LOAD_CACHE_ELSE_NETWORK，只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。

    //不使用缓存: 
    WebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);

加载网页的代码

加载本地文件：webView.loadUrl("file:///android_asset/xxx.html");

加载网页：webView.loadUrl(http://baidu.com);

接下来写一个实例给大家看看，因为内容比较多，而且很多功能其实大家也用不到，所以简单讲讲就好了。

/***
 * 
 * WebView加载本地文件和实现JS点击效果
 * 
 * @author zq
 *
 */
public class MainActivity extends Activity {

    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_main);
          initView();
    
    }
    private void initView() {
        // TODO Auto-generated method stub
          // 获取webview控件
            webView = (WebView) findViewById(R.id.activity_webview);
            // 获取WebView的设置
            WebSettings webSettings = webView.getSettings();
            // 将JavaScript设置为可用，这一句话是必须的，不然所做一切都是徒劳的
            webSettings.setJavaScriptEnabled(true);
            // 给webview添加JavaScript接口
            webView.addJavascriptInterface(new JsInterface(), "control");
            // 通过webview加载html页面
            webView.loadUrl("file:///android_asset/l.html");
    }

    public class JsInterface {
        @JavascriptInterface
        public void showToast(String toast) {
            Toast.makeText(MainActivity.this, toast, Toast.LENGTH_SHORT).show();
        }

        public void log(final String msg) {
            webView.post(new Runnable() {

                @Override
                public void run() {
                    webView.loadUrl("javascript log(" + "'" + msg + "'" + ")");

                }
            });
        }
    }

}

这里是在界面定义一个webView，然后加载本地的l.html文件，这里注意一下，本地的html资源要放在assets文件夹下，如果没有assets文件夹，自己在工程里建一个，与res文件夹在同一级。然后调用本地文件时的代码是webView.loadUrl(file:///android_asset/本地文件名.html)

这里还设置了js与android的交互webView.addJavascriptInterface(new JsInterface(), "control");这里是为js在页面可以调用名称为control的代码，也是自定义的JsInterface类的代码。

html的具体代码我也写出来，大家有兴趣可以看看。

<!DOCTYPE html>
<html>
<head>
	<title></title>
      <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
      <meta http-equiv="description" content="this is my page">
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script type="text/javascript">  

	   function showToast(toast) {       
			javascript:control.showToast(toast);
        }
       function log(msg) {
			consolse.log(msg);
		}

	  
    </script> 

    <style type="text/css">
    	input{
    		width: 100px;
    		height: 100px;
    		margin: 20px;
    	}
    </style>

</head>

<body>
	 <input type="button" value="toast" οnclick="showToast('hello world!')">
</body>
</html>

这里当点击按钮时，会调用JsInterface的showToast(String toast)的代码。