Android与JavaScript的相互调用

最新推荐文章于 2025-03-20 14:19:48 发布

原创最新推荐文章于 2025-03-20 14:19:48 发布 · 551 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器 #html #java #js

Android学习专栏收录该内容

42 篇文章

订阅专栏

本文详细介绍了如何在Android应用中整合HTML代码，并通过JavaScript与Java代码进行交互，实现数据共享与操作的技术细节。特别强调了在不同Android SDK版本下暴露Java对象至JavaScript的注意事项，确保了功能的跨平台兼容性。

最近项目中解决一个功能，需要把html代码加载到Android项目中来，同时还会在js代码中操作Java里面的数据，同时java代码也会调用js。去网上查了一些资料，也看了一下李刚老师的《疯狂Android讲义2》，基本实现了预期的功能。下面是实现一个demo的步骤：
1、在Android项目里定义一个WebView控件，它相当于是一个内嵌的浏览器。
2、通过WebView对象的getSettings().setJavaScriptEnabled(true)设置，使项目中java代码允许使用js。
3、添加联网的权限，
4、调用WebView的loadUrl(String url)方法加载需要的html页面。
5、定义一个类，到时把这个类暴露给JavaScript。
6、通过WebView的addJavascriptInterface(Object obj,String name)方法把对象暴露出去。
7、在js中去调用暴露出来对象里面的方法。
下面是代码：

package com.example.hello_world;
import java.text.SimpleDateFormat;
import java.util.Date;
import android.annotation.SuppressLint;
/**
 * 显示网页的activity
 */
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.widget.Button;

@SuppressLint("JavascriptInterface")
public class MyWebView extends Activity {   
    WebView webview;
    Button btn;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.myweb);
        btn=(Button)findViewById(R.id.btn02);
        btn.setText("获得js数据");
        webview=(WebView)findViewById(R.id.show);
        webview.loadUrl("file:///android_asset/test11.html");
        webview.getSettings().setJavaScriptEnabled(true);
        webview.addJavascriptInterface(new MyObject(this),"obj");
        btn.setOnClickListener(new View.OnClickListener() {             
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                webview.loadUrl("javascript:putstr()");
            }
        });
    }

}
package com.example.hello_world;

import java.text.SimpleDateFormat;
import java.util.Date;

import android.content.Context;
import android.webkit.JavascriptInterface;
import android.widget.Toast;

//这就是要暴露给js的那个类
public class MyObject {
    Context context;
    SimpleDateFormat sf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
    String str=(sf.format(new Date())).toString();
    public MyObject(Context context){
        this.context=context;
    }
    @JavascriptInterface
    public String getStr(){
        return str;
    }
    @JavascriptInterface
    public void putStr(String str){
        System.out.println("js里面的输入数据："+str);
        Toast.makeText(context, "js里的输入值为："+str,Toast.LENGTH_LONG).show();
    }
}

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
var num;
function getnum(newnum){
    num=newnum;
    shownum();
}
function shownum(){
    document.getElementById("text1").innerHTML=num;
}
function putstr(){
    var strs= document.getElementById("inputstr").value;
    window.obj.putStr(strs);
}
</script>
</head>

<body>
<p>
<button type="button" onclick="getnum(window.obj.getStr());">获得新数据</button>
</p>
<p id="p1">
<textarea id="text1">
数据显示的地方
</textarea>
</p>
<form>
输入字符：
  <input type="text" name="inputstr" id="inputstr"  value="空"/>
</form>
</body>
</html>

最后需要提醒广大码友的一点就是：如果设置了targetSdkVersion，当targetSdkVersion<17时没问题，targetSdkVersion>=17时不成功，这是真的，我就被坑了。如果版本大于等于17，那么久需要在暴露类中的每个方法上面加上一句：@JavascriptInterface；切记切记！