Android的WebView中js与java代码相互调用

最新推荐文章于 2023-08-24 14:38:30 发布

nj物是人非

最新推荐文章于 2023-08-24 14:38:30 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： android 文章标签： android webview java javascript

本文链接：https://blog.youkuaiyun.com/njweiyukun/article/details/50545702

android 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了在Android项目中使用WebView展示网页内容，并实现JavaScript与Java代码的相互调用。通过设置JavaScriptInterface和添加自定义类，允许JavaScript调用Java方法，同时讲解了Java调用JavaScript的简单方法。此外，还讨论了WebView中URL跳转的控制以及物理返回键的行为处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

近期一直在做nwjs的东西，所以整理android的时间比较少；今天将webview相关的知识点整理上来。

现在越来越多的的项目中会采用webview的形式的展示自己的页面，通过这种形式的最大优点是展示的内容的可控性非常强，服务器可以通过更新服务端html文件来展示最新的内容。有些复杂html页面不单单是展示内容，可能还会有一些按钮，点击按钮后会跳转到android的本地页面，这个时候就需要通过js来调用android的本地代码了。核心代码如下：

一。JavaScript调用Java代码

        WebView mMainWV = (WebView) findViewById(R.id.wv_main);
        WebSettings settings = mMainWV.getSettings();
        settings.setJavaScriptEnabled(true);
        mMainWV.addJavascriptInterface(new WykJavaScriptOnClick(),"wyk");//注册js中响应事件的对象
        mMainWV.loadUrl("file:///android_asset/test.html");

上述代码为webview的初始化：

1.setJavaScriptEnabled(true)是必须要添加的，目的是为了webview允许执行js的事件。

2.addJavascriptInterface(new WykJavaScriptOnClick(),"wyk")中的WykJavaScriptOnClick是一个自定的类，响应js的事件全部定义在这个类当中；“wyk”是一个标记符，用来与js中响应的事件绑定的。

3.loadUrl("file:///android_asset/test.html")表示用webview加载assets根目录下的test.html文件

    class WykJavaScriptOnClick{
        public WykJavaScriptOnClick() {
        }

        @JavascriptInterface
        public void print(int num){
            System.out.println("num: " + num);
        }
    }

上述代码自定义的WykJavaScriptOnClick类：

1.print(int num)是在js中要调用的方法，可以随便定义的，只要能与js中的响应事件对应上就可以了；

2.该类中所有定义的方法必须加上@JavascriptInterface，否则无法被js识别

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p id="my-p" onclick="window.wyk.print(99)">hello-world</p>

</body>
</html>

上述代码为test.html的代码：

1.onclick="window.wyk.print(99)"，js调用java代码的响应事件必须写在onclick中；解释下window.wyk.print(99)，这种写法是一种规定的格式，第一个参数window是固定的，第二个参数wyk是自定义的标记符要与java中的addJavascriptInterface声明的标记符对应，第三个参数print(99)是你要调用的方法的名字，该方法是必须要定义在addJavascriptInterface声明的类中；

二.Java调用JavaScript代码

这个就比较简单了，首先要在html代码中写一个你需要调用的js方法块

<script language="javascript">
        function callJS() {
            document.getElementById("my-p").innerHTML="android_waving.png";
        }
</script>

上述代码中声明了一个js方法名称为callJS,该方法的作用是修改一个p标签的内容

findViewById(R.id.btn_call_js).setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        mMainWV.loadUrl("javascript:callJS()");
    }
});

上述代码为测试java调用js的代码，为了方便测试，我通过一个button的点击事件来调用js代码。基本格式就如上，通过webview的loadurl方法调用js，”javascript“为固定前缀，”callJS“为js中定义的方法名字。

三.关于WebView中跳转url时，是打开外部浏览器还是通过内部的WebView跳转的控制

mMainWV.setWebViewClient(new WebViewClient(){
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        if(url != null){
            if(isInWebView) {//webivew内部跳转
                view.loadUrl(url);
            }else{//打开外部浏览器跳转
                Intent intent = new Intent(Intent.ACTION_VIEW);
                intent.setData(Uri.parse(url));
                startActivity(intent);
            }
        }
        return true;
    }
});

上述代码已经写了跳转的两种方式了（见注释）。shouldOverrideUrlLoading的作用就是为了拦截跳转url的（href），他有一个返回值，boolean类型的。true:表示webview默认不做任何处理，完全根据return true之前的代码来处理；false表示url在webview内部执行。

四.点击手机的物理返回键，需要退出当前activity还是触发网页中的后退事件？

public boolean onKeyDown(int keyCode, KeyEvent event) {
    if ((keyCode == KEYCODE_BACK) && mWebView.canGoBack()) { 
        mMainWV.goBack();
        return true;
    }
    return super.onKeyDown(keyCode, event);
}

上述代码捕获了物理返回键的事件，通过调用webview的goBack()方法触发网页的后退事件；如果没有上述代码，默认为返回上层activity。

今天的总结结束，睡觉咯~