接外包,有相关需求的可以联系我:Telegram | Email

Android调用 Webview的JS方法

该文章创建(更新)于06/5/2020,请注意文章的时效性!

缘由

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

代码

html设置

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

  • 在里面创建一个javascript.html文件,内容如下:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>emperinter</title>

    <div align="center">
        <p>I Love <a id="name"> You !</a></p>
        <P>Date:<a id="demo">now!</a></P>
        <button>button</button>
    </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>

布局

布局如下:

  • 代码
    > 仅供参考,按需修改!
<?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<String>() {
                                    @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;
            }

        });
    }
}

样例图


参考


要不赞赏一下?

微信
支付宝
PayPal
Bitcoin

版权声明 | Copyright

除非特别说明,本博客所有作品均采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。转载请注明转自-
https://www.emperinter.info/2020/06/05/android-load-webview-js/


要不聊聊?

我相信你准备留下的内容是经过思考的!【勾选防爬虫,未勾选无法留言】

*

*



微信公众号

优惠码

阿里云国际版20美元
Vultr10美元
搬瓦工 | Bandwagon应该有折扣吧?
域名 | namesiloemperinter(1美元)