WebView总结

在Android中有WebView Widget，它内置了WebKit引擎，同时，WebKit也是Mac OS X的Safari网页浏览器的基础。WebKit是一个开源的浏览器引擎， Chrome浏览器也是基于它的。所以很多表现WebView和Chrome是一样的。

很多文章中多会说在使用WebView之前，要在AndroidManifest.xml中添加 如下权限：
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
否则会出Web page not available错误。其实这是不全面的，如果我加载本地的页面是不用该权限的。

• 设置WevView要显示的网页方法有很多：

  • mWebView.loadUrl(“http://www.google.com“); // 网络
  • mWebView.loadUrl(“file:///android_asset/XX.html“); // 本地页面,这里的格式是固定的，文件要放到assets目录下
  • mWebview.postUrl(String url, byte[] postData); // 加载页面使用Post方式，postData为参数

    String postData = "password=password&username=username";
    mWebview.postUrl(url, EncodingUtils.getBytes(postData, "base64"));
    

  • mWebView.loadData(htmlString, "text/html", "utf-8"); // 加载Html数据

    String htmlString = "<h1>Title</h1><p>This is HTML text<br /><i>Formatted in italics</i><br />Anothor Line</p>";
    mWebView.loadData(htmlString, "text/html", "utf-8"); // 加载Html数据
    

  • loadData()不能加载图片内容，如果要加载图片内容或者获得更强大的Web支持请使用loadDataWithBaseURL()。
  • 显示乱码
    WebView一般为了节省资源使用UTF-8编码，而String类型的数据主要是Unicode编码， 因此在loadData()的时候需要设置相应编码让其将Unicode编码转成UTF-8但是有些时候设置后还是会出现乱码，这是因为还需要为WebView中的Text设置编码，

    WebView mWebView = (WebView)findViewById(R.id.webview) ;
    String content = getUnicodeContent() ;
    mWebView.getSettings().setDefaultTextEncodingName(“UTF -8”) ;
    mWebView.loadData(content, “text/html”, “UTF-8”) ;
    

• 设置WebView基本信息：

  • 如果访问的页面中有Javascript，则webview必须设置支持Javascript。
    webview.getSettings().setJavaScriptEnabled(true);
  • 触摸焦点起作用
    requestFocus() // 如果不设置的话，会出现不能弹出软键盘等问题。
  • 取消滚动条
    this.setScrollBarStyle(SCROLLBARS_OUTSIDE_OVERLAY);

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

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

• WebView中Padding没有效果
  WebView中使用Padding没有效果，我们在WebView外层包上一层布局就会有所改进，但是不能完全解决问题，正确的做法是在WebView的加载css中增加Padding

• WebViewClient
  如果希望点击链接由自己处理，而不是新开Android的系统browser中响应该链接。 给WebView添加一个事件监听对象WebViewClient并重写其中的一些方法： shouldOverrideUrlLoading对网页中超链接按钮的响应。 当按下某个连接时WebViewClient会调用这个方法，并传递按下的url。

  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的页面，告诉用户程序在等待网络响应。

WebView与Js交互

• Android调用WebView中的js脚本。

    // 启用javascript        mWebView.getSettings().setJavaScriptEnabled(true);
    // 加载web页面
    mWebView.loadUrl("file:///android_asset/wst.html");
    // 调用js
    mWebView.loadUrl("javascript:test('" + aa+ "')"); //aa是js的函数test()的参数
  

• Js调用Android中的方法

    public WebViewActivity extends Activity {
  
        public void onCreate() {
            // 启用javascript    
            mWebView.getSettings().setJavaScriptEnabled(true);
            // 加载web页面
            mWebView.loadUrl("file:///android_asset/wst.html");
            // 首先要对webview绑定javascriptInterface，js脚本通过这个接口来调用java代码。javascriptInterface实际就是一个普通的java类，里面是我们本地实现的java代码， 将JavascriptInterface传递给webview，并指定别名，这样js脚本就可以通过我们给的这个别名来调用我们的方法,在这里，this是实例化的对象，wst是这个对象在js中的别名
            mWebView.addJavascriptInterface(this, "wst");
        }
  
        // js所调用的native方法的本地实现，安卓4.2及以上版本（API >= 17），在注入类中为可调用的方法添加@JavascriptInterface注解，无注解的方法不能被调用，这种方式可以防范注入漏洞
        @JavascriptInterface
        public void startFunction(final String str) {  
            Toast.makeText(this, str, Toast.LENGTH_SHORT).show();  
            runOnUiThread(new Runnable() {  
  
                @Override  
                public void run() {  
                    msgView.setText(msgView.getText() + "\njs调用了java函数传递参数：" + str);  
  
                }  
            });  
        }  
    }
  

  js中通过如下代码调用即可

    <a onClick="window.wst.startFunction('hello world')" >点击调用java代码并传递参数</a>
  

• 邮箱 ：[email protected]
• Good Luck!