Android中WebView的开发

在Android手机中内置了一款高性能webkit内核浏览器,在SDK中封装为一个叫做WebView组件。下面总结一下使用webview

一、webview的基本使用方法
1. 添加权限:AndroidManifest.xml中设置权限"android.permission.INTERNET",否则会出Web page not available错误。
2. 在要Activity中生成一个WebView组件:WebView webView = new WebView(this);或者可以在activity的layout文件里添加webview控件
3. 设置WebView基本信息:

 mWebView = (WebView) findViewById(R.id.wb);
 mWebView.getSettings().setJavaScriptEnabled(true);//支持javascript
 mWebView.requestFocus();//触摸焦点起作用    
 mWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);//取消滚动条
 mWebView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);//设置允许js弹出alert对话框
 
 mWebView.addJavascriptInterface(new JsInteration(), "control");//js访问android,定义接口
   //设置了Alert才会弹出,重新onJsAlert()方法return true可以自定义处理信息
 mWebView.setWebChromeClient(new WebChromeClient() {    
@Override    
  public boolean onJsAlert(WebView view, String url, String message, JsResult result)
  {        
  //return super.onJsAlert(view, url, message, result);        
  Toast.makeText(MainActivity.this, message, Toast.LENGTH_LONG).show();        
  return true;  
  }
  });

4. 设置WevView要显示的网页:互联网用:webView.loadUrl("http://www.google.com"); 本地文件用:webView.loadUrl("file:///android_asset/XX.html"); 本地文件存放在:assets文件中
5. 如果希望点击链接由自己处理,而不是新开Android的系统browser中响应该链接。给WebView添加一个事件监听对象(WebViewClient)并重写其中的一些方法: shouldOverrideUrlLoading:对网页中超链接按钮的响应。当按下某个连接时WebViewClient会调用这个方法,并传递参数

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

6. 处理https请求webView默认是不处理https请求的,页面显示空白,需要进行如下设置:

  webView.setWebViewClient(new WebViewClient() { 
    @Override
      public void onReceivedSslError(WebView view, 
     SslErrorHandler handler, SslError error) { 
       handler.proceed(); 
     // handler.cancel(); 
   // handler.handleMessage(null); }
   });

onReceivedSslError为webView处理ssl证书设置

其中handler.proceed();表示等待证书响应handler.cancel();表示挂起连接,为默认方式handler.handleMessage(null);
可做其他处理另外还有其他一些可重写的方法
1,接收到Http请求的事件onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host, String realm)
2,载入页面完成的事件public void onPageFinished(WebView view, String url){ }同样道理,我们知道一个页面载入完成,于是我们可以关闭loading条,切换程序动作。
3,载入页面开始的事件public void onPageStarted(WebView view, String url, Bitmap favicon) { }这个事件就是开始载入页面调用的,通常我们可以在这设定一个loading的页面,告诉用户程序在等待网络响应。 通过这几个事件,我们可以很轻松的控制程序操作,一边用着浏览器显示内容,一边监控着用户操作实现我们需要的各种显示方式,同时可以防止用户产生误操作。

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

 @Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) {  
 if (keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()) {    
 webView.goBack();// 返回前一个页面   
  return true;   
}    
return super.onKeyDown(keyCode, event);
}

二、webview与js的交互(相互调用参数、传值)
前端网页全部代码,文章最后有示例项目完整源码

<!DOCTYPE html><html><head>    <meta charset="utf-8">    
<title>jaydenxiao遇上了webview</title>    
<script>
function sayHello() {
alert("我是无参无返回toast") 
}
function alertMessage(message) { 
alert(message)  
}
function toastMessage(message) {
window.control.toastMessage(message)
}
function sumToJava(number1, number2){
window.control.onSumResult(number1 + number2)
}
function sumToJava2(number1, number2) {
return number1 + number2;
}    
</script>
</head><body>
 <button type="button" id="button" onclick="toastMessage('js调用了android方法')">js访问android中方法
      
</button>
  </body>
  </html>

调用示例:
js调用Java
调用格式为window.jsInterfaceName.methodName(parameterValues)此例中我们使用的是control作为注入接口名称。

function toastMessage(message) { 
window.control.toastMessage(message) 
}
function sumToJava(number1, number2){ 
window.control.onSumResult(number1 + number2)
 }

Java调用JS
webView调用js的基本格式为webView.loadUrl(“javascript:methodName(parameterValues)”)****1. android调用js无参无返回值函数

 final String call = "javascript:sayHello()";
 mWebView.post(new Runnable() {    
  @Override    
  public void run() { 
   mWebView.loadUrl(call);    
 }
 });

2. android调用js有参无返回值函数

final String call = "javascript:alertMessage(\"" + "我是android传过来的内容,hey man" + "\")";
 mWebView.post(new Runnable() {    
 @Override    
   public void run() { 
    mWebView.loadUrl(call);    
  }
}
);

3. android调用js有参有返回值函数(4.4之前)
Android在4.4之前并没有提供直接调用js函数并获取值的方法,所以在此之前,常用的思路是 java调用js方法,js方法执行完毕,再次调用java代码将值返回。
(1).android调用js代码

   final String call = "javascript:sumToJava(1,2)";mWebView.post(new Runnable() { 
   @Override public void run() { 
   mWebView.loadUrl(call); }
   });

(2).js函数处理,并将结果通过调用android方法返回
网页端:

function sumToJava(number1, number2){ window.control.onSumResult(number1 + number2) }

(3).android在回调方法中获取js函数返回值

@JavascriptInterfacepublic void onSumResult(int result) { 
  Toast.makeText(getApplicationContext(), "我是android调用js方法(4.4前),入参是1和2,
       js返回结果是" +    result, Toast.LENGTH_LONG).show();
   }

4. android调用js有参有返回值函数(4.4以上):****
Android 4.4以上使用evaluateJavascript即可。这里展示一个简单的交互示例 具有返回值的js方法
js代码如下:

 function sumToJava2(number1, number2) {return number1 + number2;}

android代码如下:

@TargetApi(Build.VERSION_CODES.KITKAT)
public void Android2JsHaveParmHaveResult2(View view) { 
mWebView.evaluateJavascript("sumToJava2(3,4)", new ValueCallback<String>() {
@Override 
public void onReceiveValue(String Str) {   
 Toast.makeText(getApplicationContext(), "我是android调用js方法(4.4后),入参是3和4,
  js返回结果是" +    Str, Toast.LENGTH_LONG).show(); 
   }    
 } );
}

知识点

1.图片自适应
当我用webview直接显示该网页的时候,图片并不能自适应,只能够显示一部分。那么如何做到自适应手机屏幕呢?具体见代码:

WebSettings webSettings = view.getSettings(); 
 // User settings           
webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);//适应内容大小
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);

注意:对于比较复杂的网页,该方法不一定有效,需要开发者自行测试。

2.获取图片地址

那如何下载网页中的图片呢?我们可以通过webview中的setOnLongClickListener获取HitTestResult对象,通过判断该对象的类型获取点击图片的URL,然后把图片下载到本地。

webwiew.setOnLongClickListener(new View.OnLongClickListener() {      
 @Override     
 public boolean onLongClick(final View v) {             
   final WebView.HitTestResult result = ((WebView) v).getHitTestResult();             
   int type = result.getType();              
   if (type == WebView.HitTestResult.IMAGE_TYPE) {                    
   WebView.HitTestResult result = ((WebView) v).getHitTestResult();           
         String imgurl = result.getExtra();//图片地址                   
       }             
    return false;        
    }     
   });

HitTestResult的类型有:

类型 名称 作用
int ANCHOR_TYPE 已经废弃
int EDIT_TEXT_TYPE 打开一个可编辑的区域
int EMAIL_TYPE 邮件
int GEO_TYPE map地址
int IMAGE_ANCHOR_TYPE 已经废弃
int IMAGE_TYPE 图片
int PHONE_TYPE 电话号码
int SRC_ANCHOR_TPE html的a标签,内容是一个http地址
int SRC_IMAGE_ANCHOR_TYPE html的a标签,内容由http及image
int UNKNOW_TYPE 未知内容
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,905评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,140评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,791评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,483评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,476评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,516评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,905评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,560评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,778评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,338评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,925评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2 342

推荐阅读更多精彩内容