前言
android开发的过程的中,现在越来越多的项目接入网页来显示数据,那么就要求我们会使用WebView来显示网页内容,今天就简单讲解一下WebView的简单使用。
WebView在Android平台上是一个特殊的View, 他能用来显示网页,这个类可以被用来在你的app中仅仅显示一张在线的网页,还可以用来开发浏览器。WebView内部实现是采用渲染引擎来展示view的内容,提供网页前进后退,网页放大,缩小,搜索等。
WebView的基本使用
(1)可以在XML布局中添加WebView:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.zhjy.hxf.hzwebview.MainActivity"
tools:showIn="@layout/activity_main">
<LinearLayout
android:id="@+id/linearlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:visibility="visible">
<ProgressBar
android:id="@+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="3dip"
android:progressDrawable="@drawable/proessbar_bg"
android:visibility="gone" />
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<RelativeLayout
android:id="@+id/relativwlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone">
<ProgressBar
android:id="@+id/progressbar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>
</RelativeLayout>
然后在Activity中绑定的你空间:
WebView mWebView = (WebView)findViewById(R.id.webview);
(2)创建WebView的实例加入到Activity的view中:
WebView mWebView = new WebView(this);
setContentView(mWebView);
等都可以实现WebView的使用。
(3)然后就可以在网页:
//WebView加载web资源
mWebView.loadUrl("https://www.baidu.com/");
实例使用
(1)设置网页顶部加载进度条(判断页面加载过程):
WebSettings mWebSettings = mWebView.getSettings();
mWebSettings.setJavaScriptEnabled(true);
mWebView.setWebChromeClient(new WebChromeClient() {
@Override
public void onProgressChanged(WebView view, int newProgress) {
super.onProgressChanged(view, newProgress);
if (newProgress == 100) {
mProgressBar.setVisibility(View.GONE);
} else {
mProgressBar.setVisibility(View.VISIBLE);
mProgressBar.setProgress(newProgress);
}
}
});
(2)如果希望浏览的网页后退而不是退出浏览器,需要WebView覆盖URL加载,让它自动生成历史访问记录,那样就可以通过前进或后退访问已访问过的站点。
/**
* 在onKeyDown中设置webView在返回的时候
* 自动记录浏览记录
* @param keyCode
* @param event
* @return
*/
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK){
if (mWebView.canGoBack()){
mWebView.goBack();
return true;
}else {
finish();
}
}
return super.onKeyDown(keyCode, event);
}
(3)创建一个自己的WebViewClient,通过setWebViewClient关联
//覆盖WebView默认使用第三方或系统默认浏览器打开网页的行为,使网页用WebView打开
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
//返回值是true的时候控制去WebView打开,为false调用系统浏览器或第三方浏览器
view.loadUrl(url);
return true;
}
/**
* 1.网页页面开始加载的时候,执行的回调方法,可以实现加载等待界面
* 2.在此方法中设置一个超时计时器
* @param view
* @param url
* @param favicon
*/
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
mLinearLayout.setVisibility(View.GONE);
mRelativeLayout.setVisibility(View.VISIBLE);
}
/**
* 1.网页加载结束的时候,也要隐藏等待界面
* 2.onPageFinished指页面加载完成,完成后取消计时器
* @param view
* @param url
*/
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
mLinearLayout.setVisibility(View.VISIBLE);
mRelativeLayout.setVisibility(View.GONE);
}
/**
* 加载异常的界面
* @param view
* @param request
* @param error
*/
@Override
public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
super.onReceivedError(view, request, error);
Log.d("testTimeout", "-----------加载异常");
}
});
(4)访问的页面中有Javascript,则webview必须设置支持Javascript
WebSettings mWebSettings = mWebView.getSettings();
mWebSettings.setJavaScriptEnabled(true);
(5)缓存的使用
优先使用缓存
mWebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
不使用缓存
mWebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
特殊使用
先给大家说说怎么获取这个html的标题title
应用开发的时候使用WebView这个组件的过程中可能会接触到WebViewClient与WebChromeClient,那么这两个类到底有什么不同呢 ,WebViewClient主要帮助WebView处理各种通知、请求事件的,比如:
onLoadResource
onPageStart
onPageFinish
onReceiveError
onReceivedHttpAuthRequest
WebChromeClient主要辅助WebView处理Javascript的对话框、网站图标、网站title、加载进度等比如
onCloseWindow(关闭WebView)
onCreateWindow()
onJsAlert (WebView上alert无效,需要定制WebChromeClient处理弹出)
onJsPrompt
onJsConfirm
onProgressChanged
onReceivedIcon
onReceivedTitle
我们在 WebChromeClient 中的 onReceivedTitle() 方法里判断html页面的标题中是否含有 “error”,如果有,则证明html加载失败,设置加载失败的标记,让在 WebViewClient 的完成是回 调的 onPageFinish() 方法里显示自定义的加载失败的页面。
使用的是不要忘了添加网络权限:
<uses-permission android:name="android.permission.INTERNET"/>
最后张贴一下全部代码:
public class MainActivity extends AppCompatActivity {
private WebView mWebView;
private ProgressBar mProgressBar;
private LinearLayout mLinearLayout;
private RelativeLayout mRelativeLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
init();
}
private void init() {
mWebView = (WebView)findViewById(R.id.webview);
mProgressBar = (ProgressBar)findViewById(R.id.progressBar);
mLinearLayout = (LinearLayout)findViewById(R.id.linearlayout);
mRelativeLayout = (RelativeLayout)findViewById(R.id.relativwlayout);
//WebView加载web资源
mWebView.loadUrl("https://www.baidu.com/");
/**
* 对WebView设置监听器
*/
WebSettings mWebSettings = mWebView.getSettings();
mWebSettings.setJavaScriptEnabled(true);
mWebView.setWebChromeClient(new WebChromeClient() {
@Override
public void onProgressChanged(WebView view, int newProgress) {
super.onProgressChanged(view, newProgress);
if (newProgress == 100) {
mProgressBar.setVisibility(View.GONE);
} else {
mProgressBar.setVisibility(View.VISIBLE);
mProgressBar.setProgress(newProgress);
}
}
});
//覆盖WebView默认使用第三方或系统默认浏览器打开网页的行为,使网页用WebView打开
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
//返回值是true的时候控制去WebView打开,为false调用系统浏览器或第三方浏览器
view.loadUrl(url);
return true;
}
/**
* 1.网页页面开始加载的时候,执行的回调方法,可以实现加载等待界面
* 2.在此方法中设置一个超时计时器
* @param view
* @param url
* @param favicon
*/
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
mLinearLayout.setVisibility(View.GONE);
mRelativeLayout.setVisibility(View.VISIBLE);
}
/**
* 1.网页加载结束的时候,也要隐藏等待界面
* 2.onPageFinished指页面加载完成,完成后取消计时器
* @param view
* @param url
*/
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
mLinearLayout.setVisibility(View.VISIBLE);
mRelativeLayout.setVisibility(View.GONE);
}
/**
* 加载异常的界面
* @param view
* @param request
* @param error
*/
@Override
public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
super.onReceivedError(view, request, error);
Log.d("testTimeout", "-----------加载异常");
}
});
//设置访问文件
mWebSettings.setAllowContentAccess(true);
mWebSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
}
/**
* 在onKeyDown中设置webView在返回的时候
* 自动记录浏览记录
* @param keyCode
* @param event
* @return
*/
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK){
if (mWebView.canGoBack()){
mWebView.goBack();
return true;
}else {
finish();
}
}
return super.onKeyDown(keyCode, event);
}
}
WebView调用JS的使用方式
(1)首先写js文件 js_test.js
function alertFromJs(content){
alert("From js:" + content);
}
简单的一个函数,功能就是弹出一个alert。
写html文件 index.html,在html里加载js文件,注意路径
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="file:///android_asset/JsTest/js_test.js"></script>
<title>JS Test</title>
</head>
<body>
<p>加载HTML网页成功!</p>
</body>
</html>
将index.html和js_test.js放到JsTest文件夹里,将JsTest放入到安卓工程assets中。
写xml布局文件:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<Button
android:id="@+id/btnCallJSAlert"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="CALL JS ALERT" />
<WebView
android:id="@+id/wvTest"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
MainActivity的所有代码:
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private WebView wvTest;
private Button btnCallJSAlert;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
wvTest = (WebView) findViewById(R.id.wvTest);
btnCallJSAlert = (Button) findViewById(R.id.btnCallJSAlert);
btnCallJSAlert.setOnClickListener(this);
//处理Javascript的对话框,加载进度等。我们是一个用js弹出对话框的程序,所以这句必须加。
wvTest.setWebChromeClient(new WebChromeClient());
//拿到WebSettings
WebSettings webSettings = wvTest.getSettings();
//设置编码格式
webSettings.setDefaultTextEncodingName("utf-8");
//支持js
webSettings.setJavaScriptEnabled(true);
wvTest.loadUrl("file:///android_asset/JsTest/index.html");
}
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.btnCallJSAlert:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
wvTest.evaluateJavascript("javascript:alertFromJs('加载网页的wvTest.evaluateJavascript')", new ValueCallback<String>() {
/**
* 网页上的Button回调方法
* @param value
*/
@Override
public void onReceiveValue(String value) {
Log.i("TAG","网页上的Button回调方法:value = "+value);
}
});
} else {
wvTest.loadUrl("javascript:alertFromJs('加载网页的wvTest.loadUrl')");
}
break;
}
}
}
转载请注明出处:
【定陶黄公子】
http://blog.youkuaiyun.com/huang3513/article/details/53639029