WebView 加载网页和java 与js交互

[mw_shl_code=java,true]WebView是一个可以显示网页的控件。
需求：
通过WebView加载assets下的html文件。
实现页面的缩放。
向menu键添加：前进、后退和刷新，实现对网页的操作
点击网页中的链接，仍然使用本WebView浏览器，而非调用系统的浏览器
网页中有button，点击button，调用android的Toast
点击WebView隐藏地址栏和button，点击menu键显示地址栏和button。
WebView加载网页的方式
WebView webview = (WebView)findViewById(R.id.webview);
webview.loadUrl(" http://192.168.1.33:8080/  ");----访问本地服务器（如tomcat）的网页。
webview.loadUrl("http://www.baidu.com");------访问网络的的网页
webview.loadUrl(" file:///android_asset/test.html  ");---------访问本工程下assets下的html文件。。。。注意： file:///android_asset/是固定写法。
添加权限：“android.permission.INTERNET”
WebView的常用方法(介绍的是方法的作用，没有写参数，具体的方法使用在下面的示例中)
webview.setWebChromeClient();该方法可以处理进度条对话框等。
webview.setOnTouchListener();WebView设置触摸事件，比如我触摸屏幕时，可以隐藏地址栏等操作。
webview.setWebViewClient(WebViewClient client);设置该方法后，一旦你点击网页中的链接，不会去调用系统的浏览器，而是仍然使用当前的WebView浏览器。实现参数的匿名内部类
覆盖匿名内部类的方法 shouldOverrideUrlLoading(WebView view, String url)，在该方法view.load(url);
onPageStarted():在网页加载前可以做的一些操作，比如加载网页需要一些时间，那么我们就让这段时间显示进度条或提示一句话"正在加载中"
onPageFinished():在网页加载后可以做的一些操作，比如关闭进度条。
WebSettings settings = webview.getSettings():就是WebView浏览器的一些设置。
设置网页的缩放：settings.setBuiltInZoomControls(true);也就是放大和缩小网页。
settings.setJavaScriptEnabled(true):可以让android和html中的javascript进行交互。
返回键：当我们打开多个Activity，一旦点击返回键，就直接退出WebView浏览器了。然而这不是我们想要的结果，我们想要的是一点击返回键，我们退回上一个页面。这时我哦们就需要重写onKeyDown()方法。
------7,8,9三条选看，是关于menu键的内容，网页的前进、后退和刷新-------
点击menu键：我们添加几个menu，实现网页的前进后退和刷新功能。onCreateOptionsMenu();
为menu的item添加点击事件，实现前进，后退和刷新功能的具体实现方法。
点击一次menu，执行一次的方法：onPrepareOptionMenu()
android与javascript的交互：（在javascript中调用android代码）
背景：WebView加载了一个带button的html，我想点击该按钮调用android的吐司。
html代码：test.html的内容（html是非严谨的，因此如下直接复制就可以）
<button>call java</button>
<script type="text/javascript">
function demoTest(){
window.demo.demoTest("hello android i am javaScript");
}
</script>
android内必须添加的代码：
//可以让android与javascript进行交互
      settings.setJavaScriptEnabled(true);
      //让javascript调用java代码时，需要添加如下android代码
      webview.addJavascriptInterface(new Object(){
         public void demoTest(String msg){
            showToast(msg);
         }
      }, "demo");
public void showToast(String str){//弹出吐司的方法
      Toast.makeText(MainActivity.this, str, 0).show();
}
流程概述：
点击按钮：  执行：button的点击事件onclick="demoTest();"
点击事件demoTest();---->调用javascript代码的方法，执行window.demo.demoTest("hello android i am javaScript")
然后调用：android的"demo"接口的方法：public void demoTest(String msg){
            showToast(msg);
         }
showToast(msg),调用弹出吐司方法
这就是点击button调用android代码
关于android与javascript的直白理解：通过 settings.setJavaScriptEnabled(true);  方法设置android和javascript可以交互，在android中通过 webview.addJavascriptInterface（参数一：参数二）方法定义一个接口名称（参数二），通过该接口名称可以在javascript中调用该接口代表的对象的方法（参数一）。更啰嗦的说就是：参数一：new Object(){
         public void demoTest(String msg){
            showToast(msg);
         }定义了一个匿名内部类，该匿名内部类中定义了一个方法demoTest(String msg)。参数二：为该匿名内部类其的名字，通过该名字可以调用匿名内部类中定义的方法，并且必须是在javasrript中调用：调用方式：window.参数二.参数一方法名（参数）
在java中调用javascript代码：
首先需要在html中有script代码块，并且在script中定义了方法。
我们需要做的就在java中调用javascript中的方法
如何调用：WebView.loadUrl("javascript:方法名");

源码：test.html-------------该文件一定要放到assets下
   *****************************
test.html
<button>call java</button>
<script type="text/javascript">
function demoTest(){
window.demo.demoTest("hello android i am javaScript");
}
</script>

布局文件:********************************************************8
<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" >
<LinearLayout
      android:id="@+id/ll_tool"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content" >
      
      <EditText
         android:id="@+id/et"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:text="http://192.168.1.111" />
      
      <Button
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:onClick="search"
         android:text="search" />
      
      <Button
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:onClick="calljs"
         android:text="calljs" />
</LinearLayout>
<WebView
      android:id="@+id/webview"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:layout_weight="1" />
</LinearLayout>

android代码：-----------------------********************************************
package com.example.a1302_webview;

import android.app.Activity;
import android.app.ProgressDialog;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.Toast;

public class MainActivity extends Activity {

private WebView webview;
private EditText et;
private ProgressDialog pd;
private LinearLayout ll_tool;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

webview = (WebView) findViewById(R.id.webview);
et = (EditText) findViewById(R.id.et);
pd = new ProgressDialog(this);//进度条
ll_tool = (LinearLayout) findViewById(R.id.ll_tool);

//处理进度条、js对话框等时使用
webview.setWebChromeClient(new WebChromeClient(){
@Override
public void onProgressChanged(WebView view, int newProgress) {
// TODO Auto-generated method stub
super.onProgressChanged(view, newProgress);
pd.setMessage("正在快速加载"+newProgress+"%");
}
});

//为WebView设置触摸事件,触摸屏幕时因此地址栏和按钮
webview.setOnTouchListener(new OnTouchListener() {

@Override
public boolean onTouch(View v, MotionEvent event) {
// TODO Auto-generated method stub
if(ll_tool.isShown()){
ll_tool.setVisibility(View.GONE);
}
return false;
}
});

//防止调用系统浏览器
/*
   * 用setWebViewClient方法设置webView客户端，用于接收webView发出的请求，通常的用法是覆盖其中的方法，
   * 自己处理相关的事件，如：shouldOverrideUrlLoading(WebView view, String url)；在自身webView中打开新的超链接。
   */
webview.setWebViewClient(new WebViewClient(){
//设置页面加载前的事件
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
// TODO Auto-generated method stub
super.onPageStarted(view, url, favicon);
pd.show();
}

//设置页面加载后的事件
@Override
public void onPageFinished(WebView view, String url) {
// TODO Auto-generated method stub
super.onPageFinished(view, url);
// pd.cancel();
pd.dismiss();
}
});
//给屏幕添加缩放
/*
   当webView对象构造生成时，便会生成一个默认的webset对象，里面包含了默认的设置，
   可以用webSet = webView.getSettings();取得webset的引用，并对其进行修改。
   */
WebSettings settings = webview.getSettings();
//该行代码写不写都可以，因为默认的是true，表示是否支持缩放
settings.setSupportZoom(true);
//缩放的设置
settings.setBuiltInZoomControls(true);

//即时缩放,设置初始比例
// webview.setInitialScale(50);
// //
// webview.zoomIn();
// webview.zoomOut();

//可以让android与javascript进行交互
settings.setJavaScriptEnabled(true);
//让javascript调用java代码时，需要添加如下android代码
webview.addJavascriptInterface(new Object(){
public void demoTest(String msg){
showToast(msg);
}
}, "demo");
}

public void showToast(String str){
Toast.makeText(MainActivity.this, str, 0).show();
}

//在menu菜单增加几个选项
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
//参数三：order号码，可以通过getOrder标示该选项
menu.addSubMenu(0,0,0,"刷新");//0刷新
menu.addSubMenu(0,0,1,"前进");//1前进
menu.addSubMenu(0,0,2,"后退");//2后退
return true;
}

//为menu裁断添加item选中事件
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// TODO Auto-generated method stub
switch (item.getOrder()) {//menu.addSubMenu(0,0,0,"刷新");获得的是第三个参数order
case 0:
webview.reload();//刷新
break;
case 1:
if(webview.canGoForward()){
webview.goForward();//前进
}
break;
case 2:
if(webview.canGoBack()){
webview.goBack();//后退
}
break;

default:
break;
}
return super.onOptionsItemSelected(item);
}

//点击menu时显示地址栏和按钮,点击menu键一次执行一次该方法
@Override
public boolean onPrepareOptionsMenu(Menu menu) {
// 点击menu键显示地址栏和按钮
ll_tool.setVisibility(View.VISIBLE);
return super.onPrepareOptionsMenu(menu);
}

//点击事件，搜寻网址
public void search(View v){
/*
   * loadUrl()方法webView加载页面，可以是url = "http://192.168.1.33:8080/"
   * 或本地页面"file:///android_asset/index.html" webView1.loadUrl(url);
   */
String url = "file:///android_asset/test.html" ;
// String url = et.getText().toString().trim();
webview.loadUrl(url);
}

//点击返回键，不退出应用，而是回到上一个页面
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
// TODO Auto-generated method stub
if(keyCode==KeyEvent.KEYCODE_BACK&&webview.canGoBack()){
webview.goBack();
return true;
}else{
return super.onKeyDown(keyCode, event);
}
}

//在java中调用javascript中的方法
//调用方式：webview.loadUrl("javascript:方法名");
public void calljs(View v){
      webview.loadUrl("javascript:demoTest()");
}
}
[/mw_shl_code]

java, 网页

<ignore_js_op>

: A1302_WebView.zip