android 之 WebView详解

最新推荐文章于 2024-05-17 15:10:49 发布

weixin_34417200

最新推荐文章于 2024-05-17 15:10:49 发布

阅读量75

点赞数

文章标签：移动开发 javascript java ViewUI

在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对象。

4. 调用本地html: webView.loadUrl("file:///android_asset/android.html") ;

      
  
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);       
    }     

上面是基本的WebView 操作。

2. public void addJavascriptInterface (Object object, String name) 此方法的主要作用是JS调用Java代码。原理为：将WebView与一个任意对象绑定，并赋予此对象一个名字，

此时可以在这个对象里加入任意方法，执行你想要的操作，比如方法名为goBaidu(); 这时就可以在html中调用这个方法了，调用代码为在javascript的function中 window.name.goBaidu();

下面是示例代码：

Activity中：

　　 webView.addJavascriptInterface(new Object() {
            public void closeThisPage() {
                Toast.makeText(WebViewActivity.this, "JavascriptInterface is clicking", Toast.LENGTH_LONG).show();
                WebViewActivity.this.finish();
            }

            public void goToBaidu() {
                Toast.makeText(WebViewActivity.this, "JavascriptInterface is clicking", Toast.LENGTH_LONG).show();
                webView.loadUrl("http://www.baidu.com");
            }

}, "huihui");

Html中：

<html>
<head>
    <meta charset="utf-8" content="text/html" http-equiv="Content-Type"/>    //！！！charset
    <script type="text/javascript" language="javascript">
        function xixi(){
        window.huihui.closeThisPage();　　　　//核心代码
        }
        function haha(){
        window.huihui.goToBaidu();　　　　　 //核心代码
        }

</script>
</head>
<body>
<a href="" οnclick="haha()">Go to baidu page...</a>
<br/>
<a href="" οnclick="xixi()">Close</a>
</body>
</html>

3. Java调用JS :核心代码

Java中：

webview.loadUrl("javascript:method()"); //如果要传参数到Js中,注意参数形式。简单的String类型，参数两个都需要加上“’”表示字符串

JS:

function method(){

alert("From java code....");

}

</script>

4. WebView 的 public void setWebChromeClient (WebChromeClient client)。此方法用处很多，我觉得里面的onJsAlert() onJsConfirm() onJsPrompt() 方法很好。

在WebChromeClient类里可以重写这三个方法，此时WebView中加载的html中如果执行alert("alert...."); confirm("confirm..."); prompt("prompt...", "defaultValue");

这三个方法，该类就会监听到执行对应的三个方法。我们可以让这三个方法的返回值为true ，即自定义此方法。在里面写入自己定义的Dialog，便可实现html与Activity交互。

注意 JsResult 此类需要在操作时，如果操作则 result.cofirm(). 取消则 result.cancel(); 还必须这每一个方法中写入 dialog.setOnkeyListener(); 方法来监听Back键，listener中　　要写 result.cancel(); 否则系统没有消费这个事件，会出错。

下面就一个写onJsPrompt()的示例代码吧：

Activity中：

     @Override
        public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, final JsPromptResult result) {
            Log.e("onJsPrompt", "url:" + url + " and message:" + message + " and defaultValue:" + defaultValue);
            final Dialog dialog = new Dialog(WebViewActivity.this);
            dialog.setContentView(R.layout.prompt);  //自定义layout
            dialog.setTitle("This is prompt...");
            final EditText editText = (EditText) dialog.findViewById(R.id.editText);
            editText.setText(defaultValue);
            Button btnOk = (Button) dialog.findViewById(R.id.btnOK);
            btnOk.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Toast.makeText(WebViewActivity.this, "You click the ok button.." + " and The editText content is:" + editText.getText().toString(), Toast.LENGTH_LONG).show();
                    result.confirm(editText.getText().toString());
                    dialog.cancel();
                }
            });
            Button btnCancel = (Button) dialog.findViewById(R.id.btnCancel);
            btnCancel.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Toast.makeText(WebViewActivity.this, "You click the cancel button..", Toast.LENGTH_LONG).show();
                    result.cancel();
                    dialog.cancel();
                }
            });
            dialog.show();

　　　　//需要监听dialog的back事件，否则会出错
         dialog.setOnKeyListener(new DialogInterface.OnKeyListener() {
                @Override
                public boolean onKey(DialogInterface dialogInterface, int i, KeyEvent keyEvent) {
                    if (i == KeyEvent.KEYCODE_BACK) {
                        dialog.cancel();
                        result.cancel();
                        return true;
                    }
                    return false;
                }
            });
            return true;                       //此处必须返回 ture ，否则会弹出 html的对话框。需要消费事件
          // return super.onJsPrompt(view, url, message, defaultValue, result);
        }

Html 中：

<html>
<head>
    <script type="text/javascript" language="javascript">
        function jsAlert(){
        alert("This is jsAlert...");
        }
        function jsConfirm(){
            confirm("This is confirm...");
        }
        function jsPrompt(){
            prompt("This is prompt", "lianghui");
        }
    </script>
</head>
<body>
<input οnclick="jsAlert()" value="Alert" type="button" />
<br />
<input οnclick="jsConfirm()" value="Confirm" type="button" />
<br />
<input type="button" value="Prompt" οnclick="jsPrompt()" />
</body>
</html>

weixin_34417200

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
android 之 WebView详解

在Android手机中内置了一款高性能webkit内核浏览器，在SDK中封装为一个叫做WebView组件。什么是webkit WebKit是Mac OS X v10.3及以上版本所包含的软件框架（对v10.2.7及以上版本也可通过软件更新获取）。同时，WebKit也是Mac OS X的Safari网页浏览器的基础。WebKit是一个开源项目，主要由KDE的KHTML修改而来并且包含了一些来自苹...
复制链接

扫一扫