android JS和webview交互

最新推荐文章于 2024-04-06 17:46:36 发布

yuchengl0320

最新推荐文章于 2024-04-06 17:46:36 发布

阅读量915

点赞数

分类专栏： android 文章标签：混合开发 android webview与js互相

本文链接：https://blog.csdn.net/u012761326/article/details/60960609

版权

android 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.简介：

android可以通过webview与html页面进行交互，只要在webview中启用JavaScript，然后通过webview.addJavascriptInterface方法就能够实现js与java方法的互相调用。但是这种方法在低版本的android系统中有安全漏洞，所以这个方法只能在高版本的系统中用，免得出现安全问题。至于低版本的系统中怎么进行交互，后面的文章再说吧。

2.具体解析：

在java代码中，设置webview相关属性，启用JavaScript功能，绑定java方法和js

mWebView.setWebChromeClient(new WebChromeClient());
mWebView.getSettings().setJavaScriptEnabled(true);
//把js绑定到全局的myjs上，myjs的作用域是全局的，初始化后可随处使用
mWebView.addJavascriptInterface(js, "myjs");

其中，代码中的js对象是一个暴露给html中JavaScript使用的方法，暴露的方法需要用@JavaScriptInterface标记

public class JSKit {
   private MainActivity ma;
   
   public JSKit(MainActivity context) {
      this.ma = context;
   }
   @JavascriptInterface
   public void showMsg(String msg) {
      Toast.makeText(ma, msg, Toast.LENGTH_SHORT).show();
   }
   @JavascriptInterface
   public void say(String msg){
      System.out.println(msg);
   }
}

java代码写好了，那么我们来看看html文件怎么用

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi" />
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
   function showMsg(){
      alert("hello world!");
   }
   function showMsgInAndroid(){
      myjs.showMsg('hello in android!');
   }
   function sayHaHaInAndroid(){
     myjs.say('haha');
   }
</script>
</HEAD>
<BODY>
<span>测试js使用</span>

<button id='btntest' οnclick='showMsgInAndroid()'>调用android方法</button>
<button id='btnsay' οnclick='sayHaHaInAndroid()'>sayhaha</button>
</BODY>
</HTML>

在html文件中定义了3个JavaScript方法，其中fountion showMsg()方法是JavaScript方法，弹出一个webview弹框。后面两个方法中，myjs.say myjs.showMsg，这两个方法就对应了java方法中暴露的java方法。通过这两个方法，就能够调用java层的方法了。

java调用JavaScript方法：

btnShowInfo.setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View v) {
      mHandler.post(new Runnable() {
         @Override
         public void run() {
            //调用 HTML 中的javaScript 函数
            mWebView.loadUrl("javascript:showMsg()");
         }
      });
   }
});

代码中，通过mWebView的loadUrl方法来调用JavaScript方法，对应了html文件中的

function showMsg()

调用该方法，界面会弹出一个网页版的弹窗

JavaScript调用java方法：

<button id='btntest' οnclick='showMsgInAndroid()'>调用android方法</button>
<button id='btnsay' οnclick='sayHaHaInAndroid()'>sayhaha</button>

在webview加载html页面后，点击上面两个按钮，调用的JavaScript的showMsgInAndroid方法，而这个方法中对应的是 myjs.showMsg,这个方法就对应了java中的方法

   @JavascriptInterface
   public void showMsg(String msg) {
      Toast.makeText(ma, msg, Toast.LENGTH_SHORT).show();
   }

这样就实现了java，js的互相调用，可以进行简易的混合开发了。

最后上传demo链接

链接：http://pan.baidu.com/s/1nuRFHup 密码：5rue

yuchengl0320

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录