首页 > 代码库 > WebView的基本使用
WebView的基本使用
一、WebView组件介绍
1、什么是WebView
1.
WebView是一个浏览器组件，在Android 4.3系统及其以下，内部采用Webkit渲染引擎，在Android 4.4开始，采用chromium 渲染引擎来渲染View的内容。
2.
Google对WebKit进行了封装，提供了丰富的Java接口，其中最重要的便是android.webkit.WebView控件。
3.
WebKit 是一个开源的浏览器引擎
2、WebView能做什么？
1.WebView能加载显示网页、图片等，可以将其视为一个浏览器
2.采用HTML设计软件界面布局，放入assets文件夹，用Html创建UI
3、权限
<uses-permission android:name="android.permission.INTERNET"/>
二、WebView加载网页的两种方式
1、loadUrl(String url)
loadUrl("http://www.163.com") loadUrl("file:///sdcard/test.html") loadUrl("file:///sdcard/test1.jpg")
loadUrl("file:///android_asset/test.htm");
loadUrl("http://192.168.1.109:2080/webview/abc.html");
loadUrl("javascript:show(‘"+ json +"‘)"); 2、loadData(String data,String mimeType,String encoding) / loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl);
data:HTML代码
mimeType:Mime类型
text/html;
encoding:HTML代码的编码charset=utf-8
3、简述WebView加载网页的两种方式?
1.
一种是加载Url的方式，包括网址、SD卡、assets目录下的文件，以及调用JS等
2.
另一种是加载Html代码，可指定Mime类型、编码方式等
三、WebView另外一些常用方法
1、前进，判断是否可以前进一步
goForward()
canGoForward()
2、回退一步，判断是否可以回退一步
goBack() canGoBack()
3、判断是否可以前进或后退指定的次数(负数表示回退N次，正数表示前行N次) goBackOrForward(int steps)
canGoBackOrForward(steps)
四、WebView辅助类
1、WebSettings类概述：
WebSettings和WebView都在同一个生命周期中存在，当WebView被销毁后，如果再使用WebSettings则会抛出IllegalStateException异常
这个类主要负责WebView的状态配置管理。当一个WebView第一次创建的时候，它会伴随着有一个默认的设置，这个默认的设置就是WebSettings调用一次所有的getter方法。可以通过WebView.getSettings获取一个WebSettings对象，这个对象会跟WebView的生命周期一起绑定，如果这个对象绑定的WebView销毁了，再去WebSettings的方法时，就会爆出异常IllegalStateException。
//设置支持JS
setting.setJavaScriptEnabled(true);
//打开页面时，自适应屏幕
setting.setUseWideViewPort(true);
//设置视图是否加载概览模式的网页
setting.setLoadWithOverviewMode(true);
//设置显示缩放按钮
setting.setBuiltInZoomControls(true);
//使页面支持缩放
setting.setSupportZoom(true);
//不使用缓存
setting.setCacheMode(WebSettings.LOAD_NO_CACHE);
2、WebViewClient
1.主要帮助WebView处理各种通知、请求事件
2.shouldOverrideUrlLoading
例：弹出系统浏览器解决办法 例:重写shouldOverrideUrlLoading方法在点击链接时调用，返回false则使用当前的WebView加载链接，返回true则方法中代码决定如何展示。
3.onPageStarted
例:可以做拦截操作
例:这个事件就是开始载入页面调用的，通常我们可以在这设定一个loading的页面，告诉用户程序在等待网络响应（ProgressDialog）
4.onPageFinished
例:一个页面载入完成，可以关闭loading条（ProgressDialog）
通过WebView加载百度页面，通过一个简单的小Demo来实现
第一步：配置清单文件
<uses-permission android:name="android.permission.INTERNET"/>
<!--6.0动态授权的问题-->
<uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/>
第二步:准备一个简单的布局
<WebView
android:id="@+id/webView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></WebView>
private WebView webView;
private WebSettings webSettings;
private ProgressDialog pd;
private final int SDK_PERMISSION_REQUEST = 11;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//加载网页，并且设置一些属性
initWebView();
//对于6.0手机，获取动态授权
getPermissions();
}
private void initWebView() {
webView = (WebView) findViewById(R.id.webView); //初始化控件
String url = "http://www.baidu.com"; //初始化网页
webView.setWebViewClient(new WebViewClient(){
@Override //返回false则使用当前的WebView加载链接
public boolean shouldOverrideUrlLoading(WebView view, String url) {
return false;
}
@Override //页面打开时执行操作,显示一个进度条
public void onPageStarted(WebView view, String url, Bitmap favicon) {
if(pd==null){
pd = new ProgressDialog(MainActivity.this); //创建进度条
}
pd.setMessage("正在载入，请稍后..."); //提示信息
pd.show(); //显示进度条
super.onPageStarted(view, url, favicon);
}
@Override //页面关闭时执行操作
public void onPageFinished(WebView view, String url) {
if(pd!=null){
pd.cancel();//进度条取消显示
}
super.onPageFinished(view, url);
}
});
webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true); //支持js
webSettings.setUseWideViewPort(true); //自适应屏幕 可以任意比例缩放
webSettings.setLoadWithOverviewMode(true);//设置网页是否支持概览模式
webSettings.setBuiltInZoomControls(true); //设置缩放按钮
webSettings.setSupportZoom(true); //使页面支持缩放
webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE); //不支持缓存
webView.loadUrl(url);
}
private void getPermissions() {
//如果权限>=5.0,就需要动态授权
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.M){
//准备一个集合
ArrayList<String> permissions = new ArrayList<>();
//如果读取SD卡的权限不存在，就创建一个保存在集合里面
if(checkSelfPermission(READ_EXTERNAL_STORAGE)!= PackageManager.PERMISSION_GRANTED){
permissions.add(READ_EXTERNAL_STORAGE);
}
if(permissions.size()>0){
requestPermissions(permissions.toArray(new String[permissions.size()]),SDK_PERMISSION_REQUEST);
}else {
initWebView();
}
}else {
initWebView();
}
}
@Override //6.0动态授权
public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
super.onRequestPermissionsResult(requestCode, permissions, grantResults);
switch (requestCode){
case SDK_PERMISSION_REQUEST:
if(grantResults.length>0 && grantResults[0] == PackageManager.PERMISSION_GRANTED){
//允许
Toast.makeText(this, "已授权", Toast.LENGTH_SHORT).show();
}else {
//不允许
Toast.makeText(this, "拒绝授权", Toast.LENGTH_SHORT).show();
}
break;
}
}
@Override //当点击了返回键并且能够返回的时候
public boolean onKeyDown(int keyCode, KeyEvent event) {
if(keyCode==KeyEvent.KEYCODE_BACK && webView.canGoBack()){ //如果点击了返回键并且webView能够返回
webView.goBack();
return true;
}
// //如果能返回并且能够一次性返回两步的操作
// if(keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBackOrForward(-2)){
// webView.goBackOrForward(-2);
// return true;
// }
return super.onKeyDown(keyCode, event);
}
WebChromeClient
1.论述WebChromeClient的作用
主要辅助WebView处理Javascript的对话框、网站图标、网站title、加载进度，关闭webview等，常见的重写方法有：onJsAlert、onJsConfirm、onJsPrompt、 onReceivedIcon、onReceivedTitle、onProgressChanged、onCloseWindow
2.onJsAlert 参数只有一个,显示警告框的信息;无返回值
3.onJsConfirm 参数只有一个.显示提示框的信息.按确定,返回true; 按取消返回false.
4.onJsPrompt on 参数有两个, 第一个参数,显示提示输入框的信息.第二个参数,用于显示输入框的默认值.返回用户输入的值.
5.onReceivedIcon 注意必须先打开图标数据库，否则无法获取到页面图标
6.onReceivedTitle 获得网页的标题，作为应用程序的标题进行显示
7.onProgressChanged 获得网页的加载进度，显示在TextView控件中（思考如何显示在进度条中）
8.onCloseWindow 关闭网页（WebView）
第一步：配置清单文件
<uses-permission android:name="android.permission.INTERNET"/>
第二步：布局文件
activity_main.xml文件
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/webView"></WebView>
promptdialog.xml文件
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tv"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/et"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/ok"
android:text="确定"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button
android:id="@+id/cancel"
android:text="取消"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
第三步：代码实现
private WebView webView;
private WebSettings webSettings;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView) findViewById(R.id.webView);
// String url = "http://192.168.15.103:8080/webview/alert.html";
// String url = "http://192.168.15.103:8080/webview/confrim.html";
String url = "http://192.168.15.103:8080/webview/prompt.html";
webView.setWebChromeClient(new WebChromeClient(){
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
AlertDialog.Builder builder = new AlertDialog.Builder(view.getContext());
builder.setTitle("Alert警示框")
.setMessage(message)
.setPositiveButton("确定",null)
.show();
result.confirm(); //点击确定，对话框关闭
return true;
}
@Override
public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) {
AlertDialog.Builder builder = new AlertDialog.Builder(view.getContext());
builder.setTitle("confirm确认信息")
.setMessage(message)
.setPositiveButton("确定", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i) {
result.confirm();
}
})
.setNeutralButton("取消", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i) {
result.cancel();
}
})
.show();
return true;
}
@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, final JsPromptResult result) {
final Dialog dialog = new Dialog(MainActivity.this);
dialog.setContentView(R.layout.promptdialog);
dialog.setTitle("prompt输入信息");
TextView tv = (TextView) findViewById(R.id.tv);
final EditText et = (EditText) findViewById(R.id.et);
Button ok = (Button) dialog.findViewById(R.id.ok);
Button cancel = (Button) dialog.findViewById(R.id.cancel);
tv.setText(message);
et.setText(defaultValue);
ok.setOnClickListener(new View.OnClickListener() {//确定
@Override
public void onClick(View view) {
result.confirm(et.getText().toString());//将ediText里的值传递过去
dialog.cancel();
}
});
cancel.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
result.cancel();
dialog.cancel();
}
});
dialog.setOnKeyListener(new DialogInterface.OnKeyListener() {
@Override
public boolean onKey(DialogInterface dialogInterface, int keyCode, KeyEvent keyEvent) {
if(keyCode == KeyEvent.KEYCODE_BACK){
result.cancel();
dialog.cancel();
return true;
}
return false;
}
});
dialog.show();
return true;
}
});
webView.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
return false;
}
});
webView.loadUrl(url);
webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true); //支持js
webSettings.setUseWideViewPort(true); //自适应屏幕 任意比例缩放
webSettings.setUseWideViewPort(true); //设置视图是否加载概览模式的网页 目的是一个屏幕可以显示这一页所有的内容
webSettings.setBuiltInZoomControls(true); //显示缩放比例按钮
webSettings.setSupportZoom(true); //使页面支持缩放
webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE); //不使用缓存 可以方便修改软件中错误的问题
}
WebView的基本使用