Android原生与H5交互，获取点击事件

最新推荐文章于 2025-04-30 10:43:01 发布

常轻树

最新推荐文章于 2025-04-30 10:43:01 发布

阅读量103

点赞数 2

文章标签： android 交互

本文链接：https://blog.csdn.net/hkw1991/article/details/147595134

版权

引言

在开发中我们经常会遇到混合开发，涉及到原生与html交互传递信息，比如在html中点击按钮，跳转activity页面，以下为交互跳转的实现代码。

代码执行顺序由上到下依次为：

   private fun initWeb() {
        val webViewClient = WebViewClient() // 设置WebViewClient处理页面跳转等
        binding.webvMindMap.webViewClient = HomeWebClient()
        binding.webvMindMap.webChromeClient = WebChromeClient()
        val settings =  binding.webvMindMap!!.settings
        settings.javaScriptEnabled = true // 启用JavaScript，如果需要的话
         //AndroidFullScreen是别名，需要和html 中 JavaScript中function 相同并且一致
        binding.webvMindMap
.addJavascriptInterface(JsInteration(requireContext()),"AndroidFullScreen")


        settings.loadWithOverviewMode = true // 将图片调整到适合webview的大小
        settings.useWideViewPort = true // 将图片调整到适合屏幕的大小
        settings.setSupportZoom(true) // 支持缩放，默认为true。是下面那个的前提。
        settings.builtInZoomControls = true // 设置内置的缩放控件。如果为true，则屏幕上将显示放大/缩小网页的控件。
        settings.displayZoomControls = false // 隐藏原生的缩放控件
        settings.cacheMode = android.webkit.WebSettings.LOAD_NO_CACHE // 根据cache-control决定是否从网络上取数据

        settings.setDomStorageEnabled(true)

        settings.setAllowFileAccess(true)
        settings.setAllowUniversalAccessFromFileURLs(true)
        settings.setMixedContentMode(android.webkit.WebSettings.MIXED_CONTENT_ALWAYS_ALLOW)
        settings.setUserAgentString("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36");


    }

class HomeWebClient : WebViewClient() {
        override fun shouldOverrideUrlLoading(view: android.webkit.WebView, url: String): Boolean {
            view.loadUrl(url)
            return true
        }
    }

addJavascriptInterface实现

 class JsInteration(var cxt: Context) {

        @JavascriptInterface
        fun goPreLearnFull() {
            //此处接收h5返回事件
            
        }
    }

在java中的实现

 public class JsInteration{
        @JavascriptInterface
        public void goPreLearnFull() {
            //此处接收h5返回的事件
        }
    }

webview实现

<WebView
            android:id="@+id/webvMindMap"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

html实现

<!DOCTYPE html>
<html>
<head>
    <title>WebView Test</title>
    <script type="text/javascript">

       function showAndroidToast() {
             
 // AndroidFullScreen  为别名需要与  binding.webvMindMap
//.addJavascriptInterface(JsInteration(requireContext()),"AndroidFullScreen") 一致
 //goPreLearnFull 为android 接收事件的方法       
 window.AndroidFullScreen.goPreLearnFull();

         }
    </script>
</head>
<body>
Welcome to WebView
<button onclick="showAndroidToast()">Show Toast</button>
</body>
</html>