android与js交互

Posted Qunter

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了android与js交互相关的知识,希望对你有一定的参考价值。

首先引用一篇文章,看过这篇文章基本上就明白android大致与js是如何交互的了

Android与HTML+JS交互入门

----------------------------分割线-----------------------------------

首先要知道js是啥,js就相当于在html内的函数方法,全称为javascript

那么要交互,必然二者要共存于一起,在android中如何打开一个页面,比较常用的方法就是使用一个WebView控件,用它来加载网页

交互也必然是双方的,有来有往,下面分两部分说明

PS:这里直接援引前面文章中的例子,稍作修改

1,android中调用js

那么首先得有js,不然怎么调用,所以html如下

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<script type="text/javascript">

function javacalljs(){
     document.getElementById("content").innerHTML =
         "<br\>JAVA调用了JS的无参函数";
}

function javacalljswith(arg){
     document.getElementById("content").innerHTML =
         ("<br\>"+arg);
}
</script>
</head>
<body>
HTML 内容显示 <br/>
<h1><div id="content">内容显示</div></h1>
</body>
</html>

这里需注意的是,两个方法的名称需要与之后调用的名称相同:javacalljs,javacalljswith

那么将它放入工程内,或是部署在服务器上,随后在webView中加载这个url

这里只写出webView加载该url的代码

        contentWebView = (WebView) findViewById(R.id.webview);
        // 启用javascript
        contentWebView.getSettings().setJavaScriptEnabled(true);
        // 从assets目录下面的加载html
        contentWebView.loadUrl("file:///android_asset/web.html"); 

这里因为作者使用的是放入工程的方法,故而loadUrl方法内传递的是一个本地的相对地址

到这里webView加载网页就完成了,那么如何使用webView调用其中的js呢

contentWebView.loadUrl("javascript:javacalljs()");

亦或者是

contentWebView.loadUrl("javascript:javacalljswith(" + "‘http://blog.csdn.net/Leejizhou‘" + ")");

两者都是之前在html内定义过的js函数名,一个有参一个无参(这里为尊重援引博文的作者,参数内的博客地址就不修改了)

到这为之,android中调用js就完成了

那么交互交互,反过来,如何在html代码内与android交互呢

修改一下html的代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
</head>
<body>
HTML 内容显示 <br/>
<h1><div id="content">内容显示</div></h1>
<br/>
<input type="button"  value="点击调用java代码" onclick="window.android.startFunction()" />
<br/>
<input type="button"  value="点击调用java代码并传递参数" onclick="window.android.startFunction(‘http://blog.csdn.net/Leejizhou‘)"  />
</body>
</html>

这里可以看到,正如学习android时,在xml页面内写onclick来绑定点击方法一样,html用的也是这种方法,只是不同的是这里面需要输入的不止是一个方法名,而是window.变量名.方法名

方法名自不用说,至于什么是变量名,先看下面的代码

首先webView的初始化要改成如下代码

     contentWebView = (WebView) findViewById(R.id.webview);
        // 启用javascript
        contentWebView.getSettings().setJavaScriptEnabled(true);
        // 从assets目录下面的加载html
        contentWebView.loadUrl("file:///android_asset/web.html");
        contentWebView.addJavascriptInterface(MainActivity.this,"android");

最后一行添加js接口的时候,后面的“android”就是之前说的变量名

那么再往下,就需要定义这个方法了

   //由于安全原因 targetSdkVersion>=17需要加 @JavascriptInterface 
    //JS调用Android JAVA方法名和HTML中的按钮 onclick后的别名后面的名字对应
    @JavascriptInterface
    public void startFunction(){

        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Toast.makeText(MainActivity.this,"show",3000).show();

            }
        });
    }

    @JavascriptInterface
    public void startFunction(final String text){
        runOnUiThread(new Runnable() {

            @Override
            public void run() {
               new AlertDialog.Builder(MainActivity.this).setMessage(text).show();

            }
        });


    }

做到这,js就可以调用本地android中的方法了,这就实现了交互的过程

当然这里的交互非常简单,如果需求不一样,还需要修改,例如调用js时使用evaluateJavascript()会使得网页不刷新并且较为容易获得返回值等等

这方面在这篇文章中讲的很透彻,这里也直接引用

Android:你要的WebView与 JS 交互方式 都在这里了

 

以上是关于android与js交互的主要内容,如果未能解决你的问题,请参考以下文章

Android与HTML+JS交互入门

Android与js交互实例

Android与JS交互问题

Android与JS交互问题

android使用WebView里的js与android进行交互!

Android WebView与H5交互汇总