android之WebView及与js的交互

来源：互联网发布：mac待机时间设置编辑：程序博客网时间：2024/06/03 18:35

在Android手机中内置了一款高性能webkit内核浏览器，在SDK中封装为一个叫做WebView组件。

什么是webkit

WebKit是Mac OS X v10.3及以上版本所包含的软件框架（对v10.2.7及以上版本也可通过软件更新获取）。同时，WebKit也是Mac OS X的Safari网页浏览器的基础。WebKit是一个开源项目，主要由KDE的KHTML修改而来并且包含了一些来自苹果公司的一些组件。

传统上，WebKit包含一个网页引擎WebCore和一个脚本引擎JavaScriptCore，它们分别对应的是KDE的KHTML和KJS。不过，随着JavaScript引擎的独立性越来越强，现在WebKit和WebCore已经基本上混用不分（例如Google Chrome和Maxthon 3采用V8引擎，却仍然宣称自己是WebKit内核）。

这里我们初步体验一下在android是使用webview浏览网页，在SDK的Dev Guide中有一个WebView的简单例子。

在开发过程中应该注意几点：
1.AndroidManifest.xml中必须使用许可"android.permission.INTERNET",否则会出Web page not available错误。
2.如果访问的页面中有Javascript，则webview必须设置支持Javascript。
webview.getSettings().setJavaScriptEnabled(true);
3.如果页面中链接，如果希望点击链接继续在当前browser中响应，而不是新开Android的系统browser中响应该链接，必须覆盖 webview的WebViewClient对象。

mWebView.setWebViewClient(new WebViewClient(){       
                    public boolean shouldOverrideUrlLoading(WebView view, String url) {       
                        view.loadUrl(url);       
                        return true;       
                    }       
        });   

4.如果不做任何处理，浏览网页，点击系统“Back”键，整个Browser会调用finish()而结束自身，如果希望浏览的网页回退而不是推出浏览器，需要在当前Activity中处理并消费掉该Back事件。

public boolean onKeyDown(int keyCode, KeyEvent event) {       
        if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {       
            mWebView.goBack();       
                   return true;       
        }       
        return super.onKeyDown(keyCode, event);       
    }     

下一步让我们来了解一下android中webview是如何支持javascripte自定义对象的，在w3c标准中js有 window，history，document等标准对象，同样我们可以在开发浏览器时自己定义我们的对象调用手机系统功能来处理，这样使用js就可以为所欲为了。

看一个实例：

view plaincopy to clipboardprint?
public class WebViewDemo extends Activity {        
    private WebView mWebView;       
    private Handler mHandler = new Handler();       
       
    public void onCreate(Bundle icicle) {       
        super.onCreate(icicle);       
        setContentView(R.layout.webviewdemo);       
        mWebView = (WebView) findViewById(R.id.webview);       
        WebSettings webSettings = mWebView.getSettings();       
        webSettings.setJavaScriptEnabled(true);       
        mWebView.addJavascriptInterface(new Object() {       
            public void clickOnAndroid() {       
                mHandler.post(new Runnable() {       
                    public void run() {       
                        mWebView.loadUrl("javascript:wave()");       
                    }       
                });       
            }       
        }, "demo");       
        mWebView.loadUrl("file:///android_asset/demo.html");       
    }       
}   

我们看addJavascriptInterface(Object obj,String interfaceName)这个方法，该方法将一个java对象绑定到一个javascript对象中，javascript对象名就是 interfaceName（demo），作用域是Global。这样初始化webview后，在webview加载的页面中就可以直接通过 javascript:window.demo访问到绑定的java对象了。来看看在html中是怎样调用的。

<html>       
        <mce:script language="javascript"><!--     
       
                function wave() {       
                    document.getElementById("droid").src="android_waving.png";       
                }       
             
// --></mce:script>       
        <body>       
            <a onClick="window.demo.clickOnAndroid()">       
                                <img id="droid" src="android_normal.png" mce_src="android_normal.png"/><br>       
                                Click me!       
            </a>       
        </body>       
</html>      

这样在javascript中就可以调用java对象的clickOnAndroid()方法了，同样我们可以在此对象中定义很多方法（比如发短信，调用联系人列表等手机系统功能。）,这里wave()方法是java中调用javascript的例子。

这里还有几个知识点：

1)为了让WebView从apk文件中加载assets，Android SDK提供了一个schema，前缀为"file:///android_asset/"。WebView遇到这样的schema，就去当前包中的 assets目录中找内容。如上面的"file:///android_asset/demo.html"
2)addJavascriptInterface方法中要绑定的Java对象及方法要运行另外的线程中，不能运行在构造他的线程中，这也是使用 Handler的目的。

Javascript弹出框有如下三种：

Java代码  
alert();  
window.confirm("Are you srue?");  
window.prompt("Please input some word";,"this is text");  

WebChromeClient 中对三种dialog进行了捕捉，但不幸的是，并没有回调函数可以使用，
或者说不能获得用户是点击“OK”还是“CANCEL”的操作结果。
个人以为，这些方法的设置是为了对一些涉及到html操作的应用程序进行测试时使用的。
在WebChromeClient中还有以下的方法:

Java代码  
onProgressChanged(WebView view, int newProgress)；  
onReceivedIcon(WebView view, Bitmap icon)；  
onReceivedTitle(WebView view, String title)；  
onRequestFocus(WebView view)；  
onCloseWindow(WebView window)；  
onProgressChanged(WebView view, int newProgress)  

这些方法的使用我会在以后的博文中讲到.
请大家先看今天讲解的重点

Java代码  
public class WebViewDemo extends Activity {  
  
    private static final String LOG_TAG = "WebViewDemo";  
    private WebView mWebView;  
    private TextView mReusultText ;  
    private Handler mHandler = new Handler();  
  
    @Override  
    public void onCreate(Bundle icicle) {  
  
        super.onCreate(icicle);  
        setContentView(R.layout.main);  
        //获得浏览器组件  
        //WebView就是一个简单的浏览器  
        //android浏览器源码存在于LINUX\android\package\apps\Browser中  
        //里面的所有操作都是围绕WebView来展开的  
        mWebView = (WebView) findViewById(R.id.webview);  
        mReusultText = (TextView) findViewById(R.id.resultText);  
        //WebSettings 几乎浏览器的所有设置都在该类中进行  
        WebSettings webSettings = mWebView.getSettings();  
        webSettings.setSavePassword(false);  
        webSettings.setSaveFormData(false);  
        webSettings.setJavaScriptEnabled(true);  
        webSettings.setSupportZoom(false);  
        mWebView.setWebChromeClient(new MyWebChromeClient());  
        /* 
         * DemoJavaScriptInterface类为js调用android服务器端提供接口 
         * android 作为DemoJavaScriptInterface类的客户端接口被js调用 
         * 调用的具体方法在DemoJavaScriptInterface中定义： 
         * 例如该实例中的clickOnAndroid 
         */  
        mWebView.addJavascriptInterface(new DemoJavaScriptInterface(),"androd");  
        mWebView.loadUrl("file:///android_asset/page.html");  
    }  
  
    final class DemoJavaScriptInterface {  
        DemoJavaScriptInterface() {}  
  
        /** 
         * 该方法被浏览器端调用 
         */  
        public void clickOnAndroid() {  
            mHandler.post(new Runnable() {  
                public void run() {  
                    //调用js中的onJsAndroid方法  
                    mWebView.loadUrl("javascript:onJsAndroid()");  
                }  
            });  
        }  
    }  
  
    /** 
     * 继承WebChromeClient类 
     * 对js弹出框时间进行处理 
     *  
     */  
    final class MyWebChromeClient extends WebChromeClient {  
  
        /** 
         * 处理alert弹出框 
         */  
        @Override  
        public boolean onJsAlert(WebView view,String url,  
                                 String message,JsResult result) {  
            Log.d(LOG_TAG,"onJsAlert:"+message");  
            mReusultText.setText("Alert:"+message);  
            //对alert的简单封装  
            new AlertDialog.Builder(WebViewDemo.this).  
                setTitle("Alert").setMessage(message).setPositiveButton("OK",  
                new DialogInterface.OnClickListener() {  
                    @Override  
                    public void onClick(DialogInterface arg0, int arg1) {  
                       //TODO  
                   }  
            }).create().show();  
            result.confirm();  
            return true;  
        }  
  
        /** 
         * 处理confirm弹出框 
         */  
        @Override  
        public boolean onJsConfirm(WebView view, String url, String message,  
                JsResult result) {  
            Log.d(LOG_TAG, "onJsConfirm:"+message);  
            mReusultText.setText("Confirm:"+message);  
            result.confirm();  
            return super.onJsConfirm(view, url, message, result);  
        }  
  
        /** 
         * 处理prompt弹出框 
         */  
        @Override  
        public boolean onJsPrompt(WebView view, String url, String message,  
                String defaultValue, JsPromptResult result) {  
            Log.d(LOG_TAG,"onJsPrompt:"+message);  
            mReusultText.setText("Prompt input is :"+message);  
            result.confirm();  
            return super.onJsPrompt(view, url, message, message, result);  
        }  
    }  
}  

推荐学习：http://www.cnblogs.com/aimeng/archive/2012/05/24/2516547.html

0 0