Android WebView java 与 js 交互

在这里插入图片描述

春天到了,又到了人们找工作的季节,之前没有做过WebView方面的,所以才有了这篇博客。

这里先说下本篇博客的一些内容,比较适合未接触过或者了解很少的同学,那么它来了。

这里先做一些WebView的初始化工作
WebView 的核心也就是webView.settings,webView这些,下边看代码


        webView.settings.apply {
            //设置与js交互权限
            javaScriptEnabled = true
            //允许js弹框
            javaScriptCanOpenWindowsAutomatically = true

        }
        webView.apply {
            //加载本地h5界面
            loadUrl("file:///android_asset/android_deal_js.html")
            /**
        
             * @param object 这个就是管理java 与 js 方法的类,js吊起的时候就直接去这个地方找就完了
             * @param name js 中使用这个name当作当前类文件的标示,用于吊起java方法
             */
            addJavascriptInterface(
                WebIntentCallBack(this@WebViewActivity),
                WebIntentCallBack.WEB_FLAG
            )
        }

这里在加载地址的时候如果是本地页面已经要遵循协议,将我们的web的页面放到main/assets,以下这个地址算是写死的把,代码中声明的协议之后的为我当前文件名称,这里大家可以试一下copy我们创建的assets输出到文本区域会自动出现我们下边的地址,如果不一致那可能是你的路径存在问题。

file:///android_asset/

下边是html+js文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<nav>我是Js页面,下面演示一些操作</nav>
		<button onclick="takeJava()">点击吊起android方法</button>
		<br />

		<input type="button" value="JavascriptInterface" onclick="takeJava()" />
		<br />
		<a href="http://www.w3school.com.cn">跳转</a>

	</body>
	<script>
		/**
		 * java 要吊起的方法
		 */
		function jsClick() {
			alert("我是js的提示")
		}

		/**
		 * 吊起java方法
		 * @parms window js方法 需要引用它 
		 * @parms WebIntentCallBack 是我们上边 填写的名称(标示)
		 * @parms jsActionCallBack 我们在java中使用 @JavascriptInterface声明的方法
		 */

		function takeJava() {
			window.WebIntentCallBack.jsActionCallBack("我是来自js的输入内容")
		}
	</script>
</html>

这里是接收js交互的java文件

class WebIntentCallBack(private val context: WebViewActivity) {

    companion object {
        const val WEB_FLAG = "WebIntentCallBack"
    }

    @JavascriptInterface
    fun jsActionCallBack(content: String) {
        context.textShowLine.apply {
            post {
                text = content
            }
        }

    }
}

我们在开始初始化的时候添加 addJavascriptInterface方法中的内容,使用@JavascriptInterface来与js代码对应上,WEB_FLAG 这个常量 是一个吊起方法的标示,具体可以看代码中有注释。

上边主要是一些初始化的工作,下边我们来用Action来把它们串联起来

  • Android 与Js 交互

1.吊起 js 弹框(evaluateJavascript | loadUrl)

//点击 js显示弹框
        clickActionJs.setOnClickListener {
            //如果这里需要对4.4一下版本进行适配
            //格式为 html文件:方法(参数)
            val method = "android_deal_js:jsClick()"
		//为true执行的只能支持4.4以上的版本,优点为 效率高,
        if (Build.VERSION.SDK_INT > 18) {
            webView.evaluateJavascript(method, ValueCallback {
                //js 回调
            })
        } else {
        //没有版本限制,但是可以看到这个为我们初始化webView的方法,意味着我们可能需要重新加载页面,可以一目了然。
            webView.loadUrl(method)
        }
        }

这时候我们就可以吊起我们js中的方法了,可以看代码

js吊起java方法(下边重新着重贴下上边代码)
我们的Action

<input type="button" value="点击" onclick="takeJava()" />
//js
		/**
		 * 吊起java方法
		 */

		function takeJava() {
			window.WebIntentCallBack.jsActionCallBack("我是来自js的输入内容")
		}

在java中接收进行给TextView赋值

@JavascriptInterface
    fun jsActionCallBack(content: String) {
        context.textShowLine.apply {
            post {
                text = content
            }
        }

    }

2.场景是跳转多个页面,处理多页面回退的问题(onBackPressed->goBack)

  override fun onBackPressed() {
        webView.canGoBack().yes {
            webView.goBack()
            toast("yes")
        }.otherwise {
            //                webView.goBack()
            toast("no")
            super.onBackPressed()
        }
    }

上边的是在我们activity页面销毁的监听中判断是否在首页(第一个打开的页面)是的话 就销毁,不是返回到上一个web页面,我们可以看到很多App都会都会有的。

网页在本App打开(不跳转到浏览器)

 //  设置打开网页,但不离开app
        webView.webViewClient = object : WebViewClient() {
            override fun shouldOverrideUrlLoading(
                view: WebView?,
                request: WebResourceRequest?
            ): Boolean {
                return false
            }
        }

我们都知道使用WebView会消耗很大的内存,所以我们要在对的地方关掉它

 override fun onDestroy() {
        super.onDestroy()
        
        webView.destroy()
        ----------------
        webView = null
    }

PS:这里我发现有一个销毁的方法,但是我在查看源码的时候发现里面空空如也,我也不知道会不会起作用,可以使用第二种把类文件设置为Null,如果了解的小伙伴可以在评论区输出一下。

以上是我练习的,但是目前对onJsAlert()、onJsConfirm()、onJsPrompt()这几个方法还不太了解,因为目前没有具体的场景,以后用到了会进行补充

Ps:以上为我个人练习的一写见解,如果有不对的还请进行指正,感激不尽。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值