WebView使用教程

Catalogue

1 添加WebView到你的应用
2 在WebView中使用JavaScript
1. 2.1 授权使用JavaScript
2. 2.2 在Android代码中绑定JavaScript代码
3 页面导航
1. 3.1 导航web的浏览记录
参考资料

如果你想在将web页面作为APP的一部分，那么我们可以使用WebView。WebView在Android中继承了view类，作为承载网页的控件。但是我们应该知道它并没有继承web浏览器的所有特性，它所实现的也只是展示网页，以及一些基本的交互和监听功能。
WebView经常被使用的场景是，当你的APP需要向用户展示一个随时可更新的内容，比如用户条款、使用向导。那么这样的话，我们可以在一个Activity中包含一个WebView控件用来展示服务器维护的内容，这些内容可以在服务器随时更改。
WeblView另一个使用场景是，当我们需要在一个页面中请求所有用户的数据，一般的做法是写一个layout，然后利用网络请求所有所需数据，最后将这些数据填充到layout中。但最简洁的方式是，我们其实可以直接加载一个网页，这个网页包含了需要的数据。
这个教程将帮助你学会使用WebView，以及关于它高级一点的用法，比如页面跳转、js交互等。

1 添加WebView到你的应用

添加WebView到你的应用最简单的方式是在Layout中添加< WebView >标签，例如下面的例子表示一个全屏的WebView。

<?xml version="1.0" encoding="utf-8"?>
<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>

加载网页，调用loadUrl()方法即可。

1 2	WebView myWebView = (WebView) findViewById(R.id.webview); myWebView.loadUrl("http://www.example.com");

请求服务器网页时，别忘了要加网络请求权限。

<manifest ... >
<uses-permission android:name="android.permission.INTERNET" />
...
</manifest>

以上就是最简单的加载网页方式。

2 在WebView中使用JavaScript

如果你在APP展示的网页中包含JS，那么请确保WebView支持JS的加载。在此之后，你还可以新建接口让WebView与Android代码交互。

2.1 授权使用JavaScript

WebView默认不支持JS的加载，开启它需要调用WebSetting的setJavaScriptEnable()方法。WebSetting可以通过WebView的getSettings()方法获得。

1
2
3

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

WebSetting提供了许多使用性的功能，比如你想让你幸幸苦苦开发的web page只能在自己的android应用中展示，那么可以在客户端通过setUserAgentString()设置用户代理之后，在服务端遍历userAgentString字段是否是自己的客户端所设定的。

2.2 在Android代码中绑定JavaScript代码

通过接口的方式，你可以使你的Android代码和JavaScript代码进行交互。例如，你的JavaScript代码可以调用Android代码弹出一个提示框，而不是使用JavaScript的Alert（）方法。
让JavaScript和Android代码产生联系的关键是addJavaScriptInterface()方法，此方法包含两个参数，第一个是一个类对象，供JavaScript调用。第二个是接口名称，它用在JavaScript中作为调用Android方法的别名。
例如：

public class WebAppInterface {
Context mContext;

/** Instantiate the interface and set the context */
WebAppInterface(Context c) {
mContext = c;
}

/** Show a toast from the web page */
@JavascriptInterface
public void showToast(String toast) {
Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
}
}

特别提醒：如果你的Android目标SDK版本在17或以上，你必须在那些将要在JavaScript中调用的方法体前使用@JavascriptInterface标识。否则，这些方法将不会被调用。

在这个实例中，WebAppInterface允许JavaScript运行showToast方法弹出一个Toast。
你可以运行这段代码通过WebView的addJavaScriptInterface()方法，并指定接口的名称为“Android”，例如：

1 2	WebView webView = (WebView) findViewById(R.id.webview); webView.addJavascriptInterface(new WebAppInterface(this), "Android");

这段代码为运行在WebView中的JavaScript创建了一个接口“Android”，那么现在你的JavaScript已经有能力访问WebAppInterface中的showToast方法了。下面的HTML和JS代码将调用showToast方法弹出Toast提示。

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />
<script type="text/javascript">
function showAndroidToast(toast) {
Android.showToast(toast);
}
</script>

如你所看到的，在JS中使用“Android”这个接口时，并不需要初始化它，在此之前，WebView已经为你准备好了一些，你只需要通过它调用逻辑即可。

注意：
1.WebAppInterface的实例将运行在另一个线程，并不在原来新建它的线程。
2.由于通过JS可以调用本地的Android代码，那么我们对于这点要非常的谨慎。对于不受信任的web链接，不应该使用addJavascriptInterface()，除非这个链接是自己本人写的或者其它应该充分信任它的理由。同时，对于不信任的网站，我们在处理它的跳转时应该非常小心，不应该在我们的WebView中直接接受链接的跳转。（默认情况，WebView网页中的链接会跳转到手机的Web浏览器，这是保证安全的前提下一种很好的处理方法。但是，在接下来会提到的serWebViewClient()方法中，你可以自定义链接的行为，这就需要小心了。）

3 页面导航

当用户在WebView点击一个链接后，默认的行为是在web浏览器中打开该链接所指向的网页。正如上面所提及的一样，你是可以通过WebView的serWebViewClient方法自定义这个行为的。例如在自己的WebView中展示跳转的内容，而不是跳转到web浏览器。

1 2	WebView myWebView = (WebView) findViewById(R.id.webview); myWebView.setWebClient(new WebClient());

当然你还可以做更多：

private class MyWebViewClient extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view,String url){
if (Uri.parse(url).getHost().equals("www.example.com")) {
// This is my web site, so do not override; let my WebView load the page
return false;
}
// Otherwise, the link is not for a page on my site, so launch another Activity that handles URLs
Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
startActivity(intent);
return true;
}
}

然后创建MyWebViewClient的实例作为setWebClient()的参数。

1 2	WebView myWebView = (WebView) findViewById(R.id.webview); myWebView.setWebClient(new MyWebViewClient());

3.1 导航web的浏览记录

在WebView中浏览网页时，我们可能会通过web中包含的外链跳转到其它的网页（在同一Webview页面中），那么这些跳转记录是可以来回切换的，这里主要涉及到goBack()和goForward()方法的使用。
例如下面的例子，我们通过设备的返回按钮让WebView回退到上一个页面，或者退出当前Activity。

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    // Check if the key event was the Back button and if there's history
    if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()) {
        myWebView.goBack());
        return true;
    }
    // If it wasn't the Back key or there's no web page history, bubble up to the default
    // system behavior (probably exit the activity)
    return super.onKeyDown(keyCode, event);
}

参考资料

Building Web Apps in WebView