WebView的简单使用
扫描二维码
随时随地手机看文章
有时候我们可能会碰到一些比较特殊的需求，比如说要求在应用程序里展示一些网页。相信每个人都知道，加载和显示网页通常都是浏览器的任务，但是需求里又明确指出，不允许打开系统浏览器，而我们当然也不可能自己去编写一个浏览器出来，这时应该怎么办呢?
不用担心，Android 早就已经考虑到了这种需求，并提供了一个 WebView控件，借助它我们就可以在自己的应用程序里嵌入一个浏览器，从而非常轻松地展示各种各样的网页。
一、WebView通过Url加载网页
WebView是View的子类，能够让一个网页内容看起来像是你应用程序的一部分一样。它只提供页面显示的功能，默认情况下不提供浏览器应具备的导航等功能。
首先我们来看一下WebView的简单使用：
1、获得WebView的实例;
2、调用WebView类中的loadUrl(String url)方法，加载指定的网址;
3、在工程的清单文件中添加上网权限
清单文件中的上网权限：
Java代码：
public class MainActivity extends Activity {
WebView vb;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
vb = (WebView) findViewById(R.id.webView1);
vb.loadUrl("http://www.baidu.com");
}
}
当运行上面的代码后你会发现，程序会启动默认的浏览器来打开我们指定的网址，但是我们所希望的是在当前的应用中显示网页，那下面给大家介绍WebViewClient这个类以及其中的一些常用方法。WebViewClient类主要是用来帮助WebView处理各种通知、请求事件的，这其中有一些常用方法：
(1) shouldOverrideUrlLoading(WebView view, String url)，当加载的网页需要重定向的时候就会回调这个函数。
参数1：WebView对象
参数2：需要加载的url地址
返回值：return true意味着主程序接管网页加载，让我们自己操作，如果返回false让webview自己处理。
(2) onPageStarted(WebView view, String url, Bitmap favicon), 开始加载页面的回调;
(3) onPageFinished(WebView view, String url), 加载完成的回调。
当我们需要重写上述方法时需要调用WebView中setWebViewClient (WebViewClient client)方法，下面在原来代码更改为用Webview控件显示网页，代码如下：
public class MainActivity extends Activity {
WebView vb;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
vb = (WebView) findViewById(R.id.webView1);
//设置Webview
vb.setWebViewClient(new WebViewClient(){
@Override
//重写shouldOverrideUrlLoading方法
public boolean shouldOverrideUrlLoading(WebView view, String url) {
return false;
}
});
vb.loadUrl("http://www.baidu.com");
}
}
运行效果如下：
二、WebView加载HTML字符串
有时候我们的webview可能只是html片段，而不是一个完整的网页，事实上绝大多数时候都是如此，完整的网页无需做成应用，而直接在浏览器访问。
这种情况我们使用 LoadData 或者 loadDataWithBaseURL方法，后者用的最多，这里需要调用WebView中的loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl)方法：
参数1：作为该网页的base page。可设置为null。
参数2：html字符串
参数3：类型，html数据需要设置为“text/html”
参数4：字符集，如果有中文需要设置为“utf-8”
参数5：历史网页的url，可设置为null。
下面是一个简单的实例，代码如下：
public class MainActivity extends ActionBarActivity {
WebView wb;
String data = "" +
"" +
"敢问路在何方，路就在脚下" +
"";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
wb = (WebView) findViewById(R.id.webView1);
wb.loadDataWithBaseURL(null, data, "text/html", "utf-8", null);
}
}
运行结果如下：
三、WebView中JavaScript与Andorid中java方法互调
随着h5在移动端的普及，移动端对webview的使用越来越平凡，有的界面也不仅仅局限于网页的显示，很多时候就要涉及到webview与javascript代码之间的交互，这对于移动端工程师和web端工程师都是一个挑战，下面来总结下它们之间的交互和注意事项。
先说JavaScript中调用android代码，默认情况下，从WebView的界面中无法触发html中的JavaScript脚本，我们需要使能JavaScript功能，这样WebView才有能力处理html中的JavaScript脚本。使能JavaScript对应的方法为setJavaScriptEnabled(boolean flag)，该方法并不是WebView类中方法，它的使用过程如下：
(1)调用WebView中getSettings()方法获取WebSettings对象;
(2)调用WebSettings对象的实例方法setJavaScriptEnabled。
当参数设置为true时，表示使能JavaScript。
要想完成JavaScript调用android代码，还需介绍一个方法，WebView类中的addJavascriptInterface(Object object, String name)，
参数1：供JavaScript调用的对象
参数2：在JavaScript中使用的名字
该方法是这里的重点，将一个java对象绑定到一个javascript对象中，javascript对象名就是interfaceName，作用域是Global。
我们可以在JavaScript中调用Java中的函数的步骤如下：
(1)创建WebView对象
(2)使能WebView对象的JavaScript功能
(3)创建类，该类作为JavaScript调用Java代码的接口
(4)在该类中暴露方法，供JavaScript调用，注意：API 17之后的版本需 要添加注解@JavascriptInterface。
(5)将接口类对象添加给WebView
addJavascriptInterface(Object, String)
(6)在html中添加JavaScript代码，调用Java对象中暴露的方法。
具体代码如下：
MainActivity：
public class MainActivity extends ActionBarActivity {
WebView wb;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
wb = (WebView) findViewById(R.id.webView1);
//使能JavaScript
wb.getSettings().setJavaScriptEnabled(true);
//绑定对应java对象到JavaScript
wb.addJavascriptInterface(new MyJavaScript(this), "MyJavaScript");
//加载本地文件
wb.loadUrl("file:///android_asset/my.html");
}
}
本地文件放在asset目录下，调用时路径格式为file:///android_asset/xx。
自定义JavaScript调用java的类：
public class MyJavaScript {
Context context;
public MyJavaScript(Context context) {
super();
this.context = context;
}
//供JavaScript调用的java方法，此处须与JavaScript中script标签中调用的方法名一致
public void ShowToast(String str){
Toast.makeText(context, str, Toast.LENGTH_SHORT).show();
}
}
本地HTML文件：
//输出内容有中文时加上
type="button" id="button1" onclick="callAndroid();" >
点击js调用java代码
该HTML文件显示的页面只有一个“点击js调用java代码”的按钮，点击该按钮后会触发script中定义的点击事件方法callAndroid()，该方法会调用java代码中相对应的方法，从而实现JavaScript中调用android代码。运行效果如下，点击按钮后会弹出一个Toast。
下载文档
