浏览器控件是每个开发环境都具备的，这为马甲神功提供了用武之地， windows 的有 webbrowser ， android 和 ios 都有 webview 。只是其引擎不同，相对于微软的 webbrowser ， android 及 ios 的 webview 的引擎都是 webkit ，对 Html5 提供支持。本篇主要介绍 android 的 webview 之强大。

A. webview 组件如何使用 1) 添加权限： AndroidManifest.xml 中必须使用许可 "android.permission.INTERNET", 否则会出 Web page not available 错误。 2) 在要 Activity 中生成一个 WebView 组件： WebView webView = new WebView(this); 或者可以在 activity 的 layout 文件里添加 webview 控件：

< WebView

android:id = "@+id/wv"

android:layout_width = "fill_parent"

android:layout_height = "fill_parent"

android:text = "@string/hello"

/>

3) 设置 WebView 基本信息：如果访问的页面中有 Javascript ，则 webview 必须设置支持 Javascript 。 webview.getSettings().setJavaScriptEnabled(true); 触摸焦点起作用 requestFocus(); 取消滚动条 this.setScrollBarStyle(SCROLLBARS_OUTSIDE_OVERLAY); 4) 设置 WevView 要显示的网页：互联网用： webView.loadUrl("http://www.google.com"); 本地文件用： webView.loadUrl("file:///android_asset/XX.html"); 本地文件存放在： assets 文件中 5) 如果希望点击链接由自己处理，而不是新开 Android 的系统 browser 中响应该链接。给 WebView 添加一个事件监听对象（ WebViewClient) 并重写其中的一些方法： shouldOverrideUrlLoading ：对网页中超链接按钮的响应。当按下某个连接时 WebViewClient 会调用这个方法，并传递参数：按下的 url 。比如当 webview 内嵌网页的某个数字被点击时，它会自动认为这是一个电话请求，会传递 url ： tel:123 , 如果你不希望如此可通过重写 shouldOverrideUrlLoading 函数解决：

 public boolean shouldOverrideUrlLoading(WebView view,String url){

         if(url.indexOf("tel:")<0){//页面上有数字会导致连接电话

             view.loadUrl(url);

         }

            return true;          

        }

另外还有其他一些可重写的方法 1 ，接收到 Http 请求的事件 onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host, String realm)

2 ，打开链接前的事件 public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; }

这个函数我们可以做很多操作，比如我们读取到某些特殊的 URL ，于是就可以不打开地址，取消这个操作，进行预先定义的其他操作，这对一个程序是非常必要的。 3 ，载入页面完成的事件 public void onPageFinished(WebView view, String url){ }

同样道理，我们知道一个页面载入完成，于是我们可以关闭 loading 条，切换程序动作。 4 ，载入页面开始的事件 public void onPageStarted(WebView view, String url, Bitmap favicon) { }

这个事件就是开始载入页面调用的，通常我们可以在这设定一个 loading 的页面，告诉用户程序在等待网络响应。通过这几个事件，我们可以很轻松的控制程序操作，一边用着浏览器显示内容，一边监控着用户操作实现我们需要的各种显示方式，同时可以防止用户产生误操作。

6) 如果用 webview 点链接看了很多页以后，如果不做任何处理，点击系统 “Back” 键，整个浏览器会调用 finish() 而结束自身，如果希望浏览的网页回退而不是退出浏览器，需要在当前 Activity 中处理并消费掉该 Back 事件。覆盖 Activity 类的 onKeyDown(int keyCoder,KeyEvent event) 方法。

 public boolean onKeyDown(int keyCoder,KeyEvent event){
                         if(webView.canGoBack() && keyCoder == KeyEvent.KEYCODE_BACK){
                                  webview.goBack();   //goBack()表示返回webView的上一页面

                                 return true;
                          }
                          return false;
                 }

B. Webview 与 js 交互

Webview 与 js 的双向交互才是 android 的 webview 强大所在，也是马甲精神能够彻底执行的基础保障。

首先， webview 可以定义一个在其内嵌页面中可以触发的事件

 wv.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");

private final class DemoJavaScriptInterface

    {
 DemoJavaScriptInterface(){}

     public void clickonAndroid( final String order){
         mHandler.post(newRunnable(){
             @Override
             public void run(){
                       jsonText="{"name":""+order+""}";
                wv.loadUrl("javascript:wave("+jsonText+")");
             }
         });
     }
}

范文网http://www.hzptc.com/

通过以上代码，即可实现在其内嵌网页中触发 window.demo.clickOnAndroid(str) 事件并传参数 str 给 webview 。 Webview 接收到 str 之后，可以通过以上代码触发其内嵌页面中的 js 函数 wave(str) 。这样就可以实现网页触发 webview 的事件并传参数， webview 接收参数并调用 js 函数。

下面看我的 Html 脚本：

< html >

< head >

< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" >

< title > Insert title here

< script type = "text/javascript" src = "jquery.js" >

< script >

function toclient()

{

var order=$( "#val" ).val();

window.demo.clickonAndroid(order);

}

function wave(str){

//alert(str.name);

$( "#fromclient" ).text(str.name);

}

< body > 这是一个 html 页面

< br />

输入一个字符串： < br />

< input id = "val" />

< input type = "submit" value = " 点击提交给客户端 "

onclick = "toclient();" />

< br />

显示返回： < label id = "fromclient" >

通过脚本看到 wave （ str ）函数是负责将原来传给 webview 的数据重新拿回页面，效果图如下：

另外，如果你想获取页面的一些处理数据并交给 webview 客户端处理，可在 wave 函数里将数据 alert ，然后 webview 中重写 WebChromeClient 的 onJsAlert 函数，具体代码如下

wv.setWebChromeClient(new MyWebChromeClient());

final  class MyWebChromeClient extends WebChromeClient{

    @Override

      public booleanonJsAlert(WebView view, String url, String message, final JsResult result) { 

//message就是wave函数里alert的字符串，这样你就可以在android客户端里对这个数据进行处理

                result.confirm();        

              } 

 return true;  
        }

ITPub博客

android webview javascript 总结

最新文章