Android 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"));

  Java

  Copy
  • 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数据

  Java

  Copy
  • 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”) ;

  Java

  Copy
• 设置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;
   }

  Java

  Copy
• 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()的参数  

  Java

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

  Java

  Copy

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

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

  HTML

  Copy