android webview与原生交互-我爱编程

当前位置：: 首页; 文章; 前端
详情

android webview与原生交互

前端
三生万物
0

demo.html完整示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
</head>

<body>
    <div></div>

    <button type="button">点击调用android代码</button>
    <button type="button">点击调用android代码并传递参数</button>

    <script>
        function androidCallJs() {
            document.getElementById('js_content').innerHTML = 'hello tom';
        }

        // 带参数
        function androidCallJsWithArgs(name) {
            document.getElementById('js_content').innerHTML = `hello ${name}`;
        }
    </script>
</body>

</html>

一、android调用webview javascript

首先要启用javascript，默认是false

ws.setJavaScriptEnabled(true);

加载调用

webView.loadUrl("javascript:androidCallJs()"); // hello tom

// 带参数
webView.loadUrl("javascript:androidCallJsWithArgs('jack')"); // hello jack

如果要显示后调用，只需把代码放到 onPageFinished 生命周期里就可以了

二、webview javascript调用android

webView.addJavascriptInterface(new MyJavascriptInterface(this), "injectedObject");

MyJavascriptInterface.java部分代码

public class MyJavascriptInterface {
    @JavascriptInterface
    public void sayHello() {
        Log.e("hello tom");
    }

    @JavascriptInterface
    public void sayHello(String name) {
        Log.e("hello" + name);
    }

    @JavascriptInterface
    public void printImageSrc(String src) {
        Log.e("src", src);
    }
}

三、加载完直接调用

webView.loadUrl(`javascript:(function() {
    var images = document.images;
    for(var i=0; i&lt;images.length; i++) {
        images[i].onclick = function() {
            window.injectedObject.printImageSrc(this.src);
        }   
    }
})()`);

注意：上面用的是javascript模板字符串，主要是为了方面阅读，实际使用需要android代码拼装

参考链接：