android button 添加事件_Android调用 Webview的JS方法

本文介绍了一种利用原生Webview开发Android应用的方法,并详细展示了如何通过WebView加载H5页面并与之交互的过程,包括调用JavaScript方法及从Java向JavaScript传递参数。
摘要由CSDN通过智能技术生成

缘由

最近准备开发几个小的APP玩玩,但自己最擅长的可能算是前端的东西吧!这就想到了H5开发,之前有老师和我聊过,就尝试弄了一下;当然H5开发有各种开发的框架比如Flutter等等,我这里是用的原生的Webview;

代码

html设置

在src/main/下创建一个文件夹assets,注意名称,我第一次运行不了看日志才发现这个问题;

640

  • 在里面创建一个javascript.html文件,内容如下:

<html><head>    <meta charset="utf-8">    <title>emperintertitle>    <div align="center">        <p>I Love <a id="name"> You !a>p>        <P>Date:<a id="demo">now!a>P>        <button>buttonbutton>    div>    <script>    // Android需要调用的方法   function callJS(){      alert("Android调用了JS的callJS方法");   }   function ChangeName(InputName){        document.getElementById("name").innerHTML= InputName;        return InputName;   }   function callJS_val(val){      alert(val);   }script>head>html>

布局

布局如下:

640

  • 代码
    > 仅供参考,按需修改!

<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity">    <TableLayout        android:layout_width="409dp"        android:layout_height="729dp"        android:layout_marginStart="1dp"        android:layout_marginLeft="1dp"        android:layout_marginTop="1dp"        android:layout_marginEnd="1dp"        android:layout_marginRight="1dp"        android:layout_marginBottom="1dp"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toTopOf="parent">        <TableRow            android:layout_width="match_parent"            android:layout_height="match_parent" >            <WebView                android:id="@+id/Main_webview"                android:layout_width="420dp"                android:layout_height="337dp" />        TableRow>        <TableRow            android:layout_width="match_parent"            android:layout_height="match_parent" >            <Button                android:id="@+id/Main_button"                android:layout_width="wrap_content"                android:layout_height="match_parent"                android:text="@string/Mian_button" />        TableRow>        <TableRow            android:layout_width="match_parent"            android:layout_height="match_parent">            <EditText                android:id="@+id/MainText0"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:ems="10"                android:inputType="textPersonName"                android:text="Name" />        TableRow>        <TableRow            android:layout_width="match_parent"            android:layout_height="match_parent">            <Button                android:id="@+id/Main_button1"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="Button" />        TableRow>    TableLayout>androidx.constraintlayout.widget.ConstraintLayout>

java

public class MainActivity extends AppCompatActivity {    WebView mwebview;    Button mbutton;    Button mbutton1;    EditText medittext;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        //实例化        mwebview = (WebView) findViewById(R.id.Main_webview);        mbutton = (Button) findViewById(R.id.Main_button);        mbutton1 = (Button) findViewById(R.id.Main_button1);        medittext = (EditText) findViewById(R.id.MainText0);        WebSettings webSettings = mwebview.getSettings();        // 设置与Js交互的权限        webSettings.setJavaScriptEnabled(true);        // 设置允许JS弹窗        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);        // 先载入JS代码        // 格式规定为:file:///android_asset/文件名.html        mwebview.loadUrl("file:///android_asset/javascript.html");        Log.e("webload","html load successful !\n\n\n\n\n\n");        //Button事件监听        mbutton.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                // 通过Handler发送消息                mwebview.post(new Runnable() {                    @Override                    public void run() {                        // 注意调用的JS方法名要对应上                        // 调用javascript的callJS()方法                        mwebview.loadUrl("javascript:callJS()");                        Log.e("js调用:","0k!\n\n\n\n\n\n\n\n\n\n\n\n");                    }                });            }        });        mbutton1.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                mwebview.post(new Runnable() {                    @SuppressLint("NewApi")                    @Override                    public void run() {                        String str = medittext.getText().toString();                        try {                            // 只需要将第一种方法的loadUrl()换成下面该方法即可                            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {                                mwebview.evaluateJavascript("javascript:ChangeName('" + str + "')", new ValueCallback() {                                    @Override                                    public void onReceiveValue(String value) {                                        //此处为 js 返回的结果                                        Log.e("js调用change_name:","0k!\n\n\n\n\n" + value + "\n\n\n\n\n\n\n");                                    }                                });                            }else{                                mwebview.loadUrl("javascript:ChangeName('" + str +"')");                                //如何传参???                                //传参是传进去了,但页面没有任何变化。                                Log.e("ChangeName0",str + "\n\n\n\n\n");                            }                        }catch (Exception ex){                            Log.e("ChangeName Exception",":" + ex);                        }                    }                });            }        });        // 由于设置了弹窗检验调用结果,所以需要支持js对话框        // webview只是载体,内容的渲染需要使用webviewChromClient类去实现        // 通过设置WebChromeClient对象处理JavaScript的对话框        //设置响应js 的Alert()函数        mwebview.setWebChromeClient(new WebChromeClient() {            @Override            public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {                AlertDialog.Builder b = new AlertDialog.Builder(MainActivity.this);                b.setTitle("Alert");                b.setMessage(message);                b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {                    @Override                    public void onClick(DialogInterface dialog, int which) {                        result.confirm();                    }                });                b.setCancelable(false);                b.create().show();                return true;            }        });    }}

样例图

640640

参考

  • https://www.jianshu.com/p/345f4d8a5cfa

除非特别说明,本博客所有作品均采用知识共享署名-非商业性使用-禁止演绎 4.0国际许可协议进行许可。转载请注明转自-

https://www.emperinter.info/2020/06/05/android-load-webview-js/
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值