关于前端:android-webview与原生交互

58次阅读

共计 1537 个字符，预计需要花费 4 分钟才能阅读完成。

demo.html 残缺示例

<!DOCTYPE html>
<html lang="en">

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

<body>
    <div id="js_content"></div>

    <button type="button" onclick="window.injectedObject.sayHello()"> 点击调用 android 代码 </button>
    <button type="button" onclick="window.injectedObject.sayHello(' 张三 ')"> 点击调用 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>

首先要启用 javascript，默认是 false

ws.setJavaScriptEnabled(true);

加载调用

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

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

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

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<images.length; i++) {images[i].onclick = function() {window.injectedObject.printImageSrc(this.src);
        }   
    }
})()`);