首页 > 代码库 > android与js交互

android与js交互

2024-10-15 10:48:39   214人阅读

首先引用一篇文章，看过这篇文章基本上就明白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交互


联系
我们