WebView的用法详解

最新推荐文章于 2025-03-25 19:51:22 发布

原创最新推荐文章于 2025-03-25 19:51:22 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Android #安卓 #WebView #Js

WebView和Js 专栏收录该内容

1 篇文章

订阅专栏

1、布局

<WebView
	android:id="@+id/wv"
	android:layout_width="match_parent"
	android:layout_height="match_parent" />

2、WebView加载网页

//加载网页链接
mWebView.loadUrl("http://www.");
//加载本地assets目录下的网页
mWebView.loadUrl("file:///android_asset/demo.html");

3、WebView基本设置

WebSettings settings = mWebView.getSettings();
settings.setBuiltInZoomControls(true);// 显示缩放按钮(wap网页不支持)
settings.setUseWideViewPort(true);// 支持双击缩放(wap网页不支持)
settings.setJavaScriptEnabled(true);// 支持js功能

4、设置WebViewClient

mWebView.setWebViewClient(new WebViewClient() {
	// 开始加载网页
	@Override
	public void onPageStarted(WebView view, String url, Bitmap favicon) {
		super.onPageStarted(view, url, favicon);
	}

	// 网页加载结束
	@Override
	public void onPageFinished(WebView view, String url) {
		super.onPageFinished(view, url);
	}

	// 所有链接跳转会走此方法
	@Override
	public boolean shouldOverrideUrlLoading(WebView view, String url) {
		System.out.println("跳转链接:" + url);
		view.loadUrl(url);// 在跳转链接时强制在当前webview中加载
		//此方法还有其他应用场景, 比如写一个超链接<a href="tel:110">联系我们</a>, 当点击该超链接时,
		//可以在此方法中获取链接地址tel:110, 解析该地址,获取电话号码, 然后跳转到本地打电话页面, 而不是加载网页, 从而实现了webView和本地代码的交互
		return true;
	}
});

5、设置WebChromeClient

mWebView.setWebChromeClient(new WebChromeClient() {
	@Override
	public void onProgressChanged(WebView view, int newProgress) {
		super.onProgressChanged(view, newProgress);
		// 进度发生变化
		System.out.println("进度:" + newProgress);
	}

	@Override
	public void onReceivedTitle(WebView view, String title) {
		super.onReceivedTitle(view, title);
		// 网页标题
		System.out.println("网页标题:" + title);
	}
});

mWebView.goBack();//跳到上个页面
mWebView.goForward();//跳到下个页面
mWebView.canGoBack();//是否可以跳到上一页(如果返回false,说明已经是第一页)
mWebView.canGoForward();//是否可以跳到下一页(如果返回false,说明已经是最后一页)

点击返回键，回到上一页

private long mStartTime;
@Override
public void onBackPressed() {//点击返回键的时候
	if (mWebView.canGoBack()) {
		mWebView.goBack();
	} else {
		long currentTime = System.currentTimeMillis();
		if ((currentTime - mStartTime) < 2000) {
			this.finish();
		} else {
			mStartTime = System.currentTimeMillis();
			Toast.makeText(this, "再点击一次返回，则退出应用", Toast.LENGTH_SHORT).show();
		}
	}
}

7、缓存设置

cache-control是在请求网页时服务器的响应头,此响应头用于决定网页的缓存策略。
常见的取值有public(所有内容都将被缓存), private(内容只缓存到私有缓存中),no-cache(所有内容都不会被缓存),max-age=xxx(缓存的内容将在 xxx 秒后失效)等等

WebSettings settings = mWebView.getSettings();
//只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据
settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
//只加载缓存
settings.setCacheMode(WebSettings.LOAD_CACHE_ONLY);
//根据cache-control决定是否从网络上取数据
settings.setCacheMode(WebSettings.LOAD_DEFAULT);
//不加载缓存
settings.setCacheMode(WebSettings.LOAD_NO_CACHE);

8、清理缓存

最简便的方式:
mWebView.clearCache(true);
另外一种方式:
//删除缓存文件夹
File file = CacheManager.getCacheFileBaseDir(); 
   if (file != null && file.exists() && file.isDirectory()) { 
	for (File item : file.listFiles()) { 
	 item.delete(); 
	} 
	file.delete(); 
   } 
//删除缓存数据库
context.deleteDatabase("webview.db"); 
context.deleteDatabase("webviewCache.db");

9、Cookie

//Cookie设置
CookieSyncManager.createInstance(this);
CookieManager cookieManager = CookieManager.getInstance();
cookieManager.setAcceptCookie(true);
String cookie = "name=xxx;age=18";
cookieManager.setCookie(URL, cookie);
CookieSyncManager.getInstance().sync();
//获取Cookie
CookieManager cookieManager = CookieManager.getInstance();
String cookie = cookieManager.getCookie(URL);
//清除Cookie
CookieSyncManager.createInstance(context);  
CookieManager cookieManager = CookieManager.getInstance(); 
cookieManager.removeAllCookie();
CookieSyncManager.getInstance().sync();

10、Js调用Android

WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(true);//开启js
mWebView.loadUrl("file:///android_asset/demo.html");//加载本地网页
mWebView.setWebChromeClient(new WebChromeClient());//此行代码可以保证js的alert弹窗正常弹出

//核心方法, 用于处理js被执行后的回调
mWebView.addJavascriptInterface(new JsCallback() {

	@JavascriptInterface//注意:此处一定要加该注解,否则在4.1+系统上运行失败
	@Override
	public void onJsCallback() {
		System.out.println("js调用Android啦");
	}
}, "demo");//参1是回调接口的实现;参2是js回调对象的名称
//定义回调接口
public interface JsCallback {
	public void onJsCallback();
}

Js中：

<!-- Js调用Android代码 -->
<a onClick="window.demo.onJsCallback()">

11、Android调用Js

//直接使用webview加载js就可以了
mWebView.loadUrl("javascript:wave()");

Js中

function wave() {
	alert("Android调用Js啦");
}

最后附上android和js交互demo