当前位置： 移动技术网 > IT编程>移动开发>Android > Android WebView的使用方法及与JS 相互调用

Android WebView的使用方法及与JS 相互调用

2019年07月24日  | 移动技术网IT编程  | 我要评论

黄文迪,水龟虫科,达州

android webview的使用方法及与js 相互调用

1、添加网络权限

<uses-permission android:name="android.permission.internet" />

2、websettings 对访问页面进行设置。

webview mwebview = new webview(this);
 
websettings websettings = mwebview .getsettings();//支持获取手势焦点，输入用户名、密码或其他
 
mwebview.requestfocusfromtouch();
 
websettings.setjavascriptenabled(true); //支持js
 
websettings.setusewideviewport(true); //将图片调整到适合webview的大小 
 
websettings.setloadwithoverviewmode(true); // 缩放至屏幕的大小
 
websettings.setsupportzoom(true); //支持缩放，默认为true。是下面那个的前提。
 
websettings.setbuiltinzoomcontrols(true); //设置内置的缩放控件。
 
websettings.setdisplayzoomcontrols(false); //隐藏原生的缩放控件
 
websettings.setlayoutalgorithm(layoutalgorithm.single_column); //支持内容重新布局 
 
websettings.supportmultiplewindows(); //多窗口 
 
websettings.setcachemode(websettings.load_cache_else_network); //关闭webview中缓存 
 
websettings.setallowfileaccess(true); //设置可以访问文件 
 
websettings.setneedinitialfocus(true); //当webview调用requestfocus时为webview设置节点
 
websettings.setjavascriptcanopenwindowsautomatically(true); //支持通过js打开新窗口 
 
websettings.setloadsimagesautomatically(true); //支持自动加载图片
 
websettings.setdefaulttextencodingname("utf-8");//设置编码格式

3、页面加载方式

//加载一个网页：
 
mwebview.loadurl();
 
//加载apk包中的一个html页面
 
mwebview.loadurl();
 
//加载手机本地的一个html页面的方法：
 
mwebview.loadurl("content://com.android.htmlfileprovider/sdcard/test.html");

4、webview 的两个重要方法 webviewclient 和 webchromeclient

webviewclient就是帮助webview处理各种通知、请求事件的。

//打开网页时不调用系统浏览器， 而是在本webview中显示：
mwebview.setwebviewclient(new webviewclient(){   
 
 @override
  public boolean shouldoverrideurlloading(webview view, string url) {
    view.loadurl(url); 
    return true;
  }
});
//将上面定义的webviewclinet设置给webview 
mwebview.setwebviewclient(webviewclient);

下面介绍 webview 的一些事件：

webviewclient mwebviewclient = new webviewclient() 
{ 
  shouldoverrideurlloading(webview view, string url); 
  //在网页上的所有加载都经过这个方法,这个函数我们可以做很多操作。
  //比如获取url，查看url.contains(“add”)，进行添加操作
  shouldoverridekeyevent(webview view, keyevent event);
  //重写此方法才能够处理在浏览器中的按键事件。
  onpagestarted(webview view, string url, bitmap favicon) ;
  //这个事件就是开始载入页面调用的，我们可以设定一个loading的页面，告诉用户程序在等待网络响应。
  onpagefinished(webview view, string url);
  //在页面加载结束时调用。同样道理，我们可以关闭loading 条，切换程序动作。
  onloadresource(webview view, string url) ;
  // 在加载页面资源时会调用，每一个资源（比如图片）的加载都会调用一次。
  onreceivederror(webview view, int errorcode, string description, string failingurl);
  // (报告错误信息)
  doupdatevisitedhistory(webview view, string url, boolean isreload);
  //(更新历史记录)
  onformresubmission(webview view, message dontresend, message resend);
  //(应用程序重新请求网页数据)
  onreceivedhttpauthrequest(webview view, httpauthhandler handler, string host,string realm);
  //（获取返回信息授权请求）
  onreceivedsslerror(webview view, sslerrorhandler handler, sslerror error); 
  //重写此方法可以让webview处理https请求。
  onscalechanged(webview view, float oldscale, float newscale); 
  // (webview发生改变时调用)
  onunhandledkeyevent(webview view, keyevent event); 
  //（key事件未被加载时调用） 
}

webchromeclient是辅助webview处理javascript的对话框，网站图标，网站title，加载进度等。

webchromeclient mwebchromeclient = new webchromeclient() {
 
  //获得网页的加载进度，显示在右上角的textview控件中
  @override
  public void onprogresschanged(webview view, int newprogress) {
    if (newprogress < 100) {
      string progress = newprogress + "%";
    } else {
    }
  }
  //获取web页中的title用来设置自己界面中的title
  //当加载出错的时候，比如无网络，这时onreceivetitle中获取的标题为 找不到该网页,
  //因此建议当触发onreceiveerror时，不要使用获取到的title
  @override
  public void onreceivedtitle(webview view, string title) {
    mainactivity.this.settitle(title);
  }
  @override
  public void onreceivedicon(webview view, bitmap icon) {
    //
  }
  @override
  public boolean oncreatewindow(webview view, boolean isdialog, boolean isusergesture, message resultmsg) {
    //
    return true;
  }
  @override
  public void onclosewindow(webview window) {
  }
  //处理alert弹出框，html 弹框的一种方式
  @override
  public boolean onjsalert(webview view, string url, string message, jsresult result) {
    //
    return true;
  }
  //处理confirm弹出框
  @override
  public boolean onjsprompt(webview view, string url, string message, string defaultvalue, jspromptresult 
      result) {
    //
    return true;
  }
  //处理prompt弹出框
  @override
  public boolean onjsconfirm(webview view, string url, string message, jsresult result) {
    //
    return true;
  }
};
 
//同样，将上面定义的webchromeclient设置给webview：
webview.setwebchromeclient(mwebchromeclient);

5、调用 js 代码

websettings websettings = mwebview .getsettings(); 
 
websettings.setjavascriptenabled(true);//这里必须设置
 
mwebview.addjavascriptinterface(new insertobj(), "jsobj");

以下方法是 android 和 js 的交互

public class insertobj extends object {
 private static activity mactivity;
 private static webview mwebview;
 
 public insertobj(activity activity, webview webview) {
 mactivity = activity;
 mwebview = webview;
 }
 //给html提供的方法，js中可以通过：var str = window.jsobj.htmlcalljava(); 获取到
 @javascriptinterface
 public string htmlcalljava() {
 return "html call java";
 }
 //给html提供的有参函数 ： window.jsobj.htmlcalljava2("it-homer blog");
 @javascriptinterface
 public string htmlcalljava2(final string result) {
 return "html call java : " + result;
 }
 //html给我们提供的函数
 @javascriptinterface
 public static void javacallhtml() {
 mactivity.runonuithread(new runnable() {
  @override
  public void run() {
  //这里是调用方法
  mwebview.loadurl("javascript: showfromhtml()");
  toast.maketext(mactivity, "clickbtn", toast.length_short).show();
  }
 });
 }
 //html给我们提供的有参函数
 @javascriptinterface
 public static void javacallhtml2(final string param) {
 mactivity.runonuithread(new runnable() {
  @override
  public void run() {
  mwebview.loadurl("javascript: showfromhtml2('"+param+"')");
  toast.maketext(mactivity, "clickbtn2", toast.length_short).show();
  }
 });
 }
}

<!doctype html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<title>无标题 1</title>
<script type="text/javascript">
 
  function htmlcalljava(){
      var str = window.jsobj.htmlcalljava();
      alert(str);
    }
     
  function htmlcalljava2(){
       var str = window.jsobj.htmlcalljava2("html");
       alert(str);
    }
  
 function showfromhtml()
 {
  alert("我是js方法，我被android后台调用");
 }
  
 function showfromhtml2(result)
 {
  alert("我是js方法，我被android后台调用 "+result);
 }
 
  </script>
</head>
<body>
<button onclick="htmlcalljava()">htmlcalljava</button>
<button onclick="htmlcalljava2()">htmlcalljava2</button>
</body>
</html>

 6、webview 返回键

public boolean onkeydown(int keycode, keyevent event) {
  if ((keycode == keyevent.keycode_back) && mwebview.cangoback()) {    
 
    mwebview.goback();    
    return true; 
  } 
  return super.onkeydown(keycode, event);
}

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持，如有疑问请留言或者到本站社区交流讨论，大家共同进步！

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网