Android与HTML JavaScript交互

最新推荐文章于 2024-04-16 20:33:30 发布

小傲傲i

最新推荐文章于 2024-04-16 20:33:30 发布

阅读量912

点赞数 1

分类专栏： Android 文章标签： Android HTML JavaScript 交互

本文链接：https://blog.csdn.net/weixin_43328457/article/details/93588344

版权

Android 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

HTML(JavaScript)与Android的webView控件相互通信，今天仔细研究才发现，这两者相互调用是非常简单的，只需要在Android里面调用JavaScript的方法，以及在JavaScript里面调用Android里面的方法即可完成，思路很简单，具体执行起来其实也并不复杂，下面是具体的代码，以及代码注释：
HTML代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Android端与HTML相互通信</title>
    <style type="text/css">
       这里的层叠样式表就省略了因为对接下的
       来的代码没有任何关系
    </style>
</head>
<body>
<h2>Android与HTML相互通信示例</h2>
<--!h2标签说明-->
<div id="xiahuaxian"></div>
<h3 id="zza">Android消息</h3>
在此处输入想要发送到Android端的信息
<br><input type="text" id="usernameId" ;/>
在这里设置一个文本框，用来获取用户输入的文字消息然后应用到js里面进操作

<button onclick="setUsername()">点击发送到Android端消息</button>
<input type="button" id="btn" value="点击接收来自Android端的消息">
<script>
//给HTML里面的按钮绑定点击事件，方法的内容是
//关联一个标签，并将Android端的user类里面的getUSername方法调用，并传值
    document.querySelector('input[type=button]').onclick =function () {
        var h3 = document.getElementById("zza");
        h3.innerHTML ="Android的消息是："+window.user.getUsername();
//这里的window就是调用Android里面的java方法

    }
    //此方法使将HTML里面的文本框的内容直接调用Android里面的setUsername进行传值
    //并弹窗
    function setUsername() {
        var input = document.getElementById("usernameId").value;
        if (input == "") {
            alert("内容不能为空！");
            return;
        } else {
            alert(input);
            //与android端交互 将数据input提交到android端 --->user是将android本地的对象传递过来的，调用andorid端定义的方法<span style="font-family: Arial, Helvetica, sans-serif;">setUsername()</span>
            window.user.setUsername(input);
        }
    }
</script>
</body>
</html>

//导包略过
public class MainActivity extends Activity {
    private WebView webView;
    private EditText editText;
    private Button button;
    private TextView textView;
    //定义好所需要的控件
    @SuppressLint("JavascriptInterface")
    //定义好SuppressLint("JavascriptInterface")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ByID();
        //设置支持JavaScript语言，让WebView支持javascript的动作
        webView.getSettings().setJavaScriptEnabled(true);
        //交互对象的添加,传入对象在html5界面的javascript中获取，该对象用于两者之间的交互。question,给JavaScript添加一个与之交互的接口,传入一个对象和该对象的名字，在html5端根据这个名字得到对象
        //提供一个供h5交互的对象，并给对象标记个名字供js识别
        webView.addJavascriptInterface( mUser= new User(), "user");
        //自定义实现alert
        //要加载的页面
        webView.loadUrl("http://10.0.2.2:63343/WWW/PHPwithHTML/test.html");
        webView.setWebViewClient(new zzaWebViewClient());
    }
public void ByID(){
    //关联ID
    webView = findViewById(R.id.webView);
    textView=findViewById(R.id.textView);
    button=findViewById(R.id.button);
    editText=findViewById(R.id.editText);
}
    public class User {
        //在user类里面写两个方法供js调用
        //一定要在每一个方法前面加入 @JavascriptInterface
        private String username;
       @JavascriptInterface
        public String getUsername() {
            //此方法直接返回AndroidUI页面里面的文本框的值
            return editText.getText().toString();
        }
        @JavascriptInterface
        public void setUsername(String username) {
            this.username = username;
            //将js里面传过来的值直接添加到UI页面的文本信息之中
            textView.append(username+"\n");
                Log.i("TAG", username);
        }
    }
    class zzaWebViewClient extends WebViewClient{
        //不重新打开系统的浏览器加载网页
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    }
}

效果图：
JavaScript---->Android

Android----->JavaScript

小傲傲i

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Android与HTML JavaScript交互

HTML(JavaScript)与Android的webView控件相互通信，今天仔细研究才发现，这两者相互调用是非常简单的，只需要在Android里面调用JavaScript的方法，以及在JavaScript里面调用Android里面的方法即可完成，思路很简单，具体执行起来其实也并不复杂，下面是具体的代码，以及代码注释：HTML代码<!DOCTYPE html><html...
复制链接

扫一扫