webView的使用
我们通过一个小的测试程序来体会webView的简单使用，项目结构如下：
一、 webView加载页面，重写shouldOverrideUrlLoading方法，不使用系统默认的浏览器：
private WebView webView; private EditText editText; private String htmlUrl = "file:///android_asset/index.html"; private void initComponent() { webView = (WebView) findViewById(R.id.webView); editText = (EditText) findViewById(R.id.editText); } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initComponent(); webView.getSettings().setJavaScriptEnabled(true); // 支持javascript webView.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); // 根据传入的参数再去加载新的网页 return true; // 表示当前WebView可以处理打开新网页的请求，不用借助系统浏览器 } }); }
二、 用webView加载url资源：
// 请求url资源： public void searchURL(View view) { String urlStr = editText.getText().toString(); webView.loadUrl(htmlUrl); }
三、 用webView加载数据：
// 加载html代码片断 public void loadDataMethod(View view) { String summary = "<html><body>You scored <b>192</b> points.</body></html>"; webView.loadData(summary, "text/html", "utf-8"); }
四、 我们还可心在请求的html资源中，加入带有andoroid支持的JS代码。例如在js中使用toast，首先我们定义一个类，供在js中调用：
public class AppUseJSInterface { Context mContext; AppUseJSInterface(Context c) { mContext = c; } @JavascriptInterface public void showToast(String toast) { Toast.makeText(mContext, toast, Toast.LENGTH_LONG).show(); } }
接着我们在android代码中使用addJavascriptInterface方法，关联js与android：
// 请求html资源,在js中使用android public void searchHTML(View view) { // 给这个对象起的别名叫“huhxJS” webView.addJavascriptInterface(new AppUseJSInterface(this), "huhxJS"); webView.loadUrl(htmlUrl); }
最后我们在js中使用android定义的接口：
<script type="text/javascript">
function androidJS() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
huhxJS.showToast("username: " + username + ", password: " + password);
}
</script>
五、 我们还可以在andoird中调用js代码，如下：
在android调用js中的javascriptJS函数：
// 在android中调用js public void useJSInAndroid(View view) { String name = "I love you"; webView.loadUrl("javascript:javascriptJS('" + name + "')"); }
在js中定义javascriptJS()函数:
function javascriptJS(some) { huhxJS.showToast(some); }
六、 实现webView的回退功能：
@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) && webView.canGoBack()) { webView.goBack(); return true; } else if (keyCode == KeyEvent.KEYCODE_FORWARD && webView.canGoForward()) { webView.goForward(); return true; } return super.onKeyDown(keyCode, event); }
七、 测试加载用的页面：index.html
<html> <head> <script type="text/javascript"> function androidJS() { var username = document.getElementById("username").value; var password = document.getElementById("password").value; huhxJS.showToast("username: " + username + ", password: " + password); } function javascriptJS(some) { huhxJS.showToast(some); } </script> </head> <body> <form action="#" method="get"> <font color="red">username:</font> <input type="text" id="username" name="username"><br> <font color="red">password:</font> <input type="password" id="password" name="password"><br> <input type="submit" value="submit"> </form> <Button onclick="androidJS()">ClickOnMe</Button> </body> </html>