Android WebView与JS交互入门

首先在Anndroid代码中对WebView进行初始化javascript

webView = (WebView) findViewById(R.id.webview);
        
// 启用javascript
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new Test(),"android");

class Test{
    @JavascriptInterface
    public void show(){

        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Toast.makeText(MainActivity.this,"show",3000).show();

            }
        });
    }
    @JavascriptInterface
    public void showText(String text){

        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Toast.makeText(MainActivity.this,text,3000).show();

            }
        });
    }
}

html的代码以下html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<script type="text/javascript">

function javacalljs(){
     document.getElementById("content").innerHTML =
         "<br\>JAVA调用了JS的无参函数";
}

function javacalljswith(arg){
     document.getElementById("content").innerHTML =
         ("<br\>"+arg);
}
</script>
</head>
<body>
HTML 内容显示 <br/>
<h1><div id="content">内容显示</div></h1>
<br/>
<input type="button"  value="点击调用java代码" onclick="window.android.show()" />
<br/>
<input type="button"  value="点击调用java代码并传递参数" onclick="window.android.showText('你好')"  />
</body>
</html>

WebView与js交互主要分四种状况前端

一、Android 调用HTML中的javascript脚本java

//调用js中无参方法
webView.loadUrl("javascript:javacalljs()");

二、HTML中的javascript脚本调用Android本地代码android

window.android.show()

三、Android 调用HTML中的javascript脚本并传递参数web

//传递参数调用JS的方法
webView.loadUrl("javascript:javacalljswith(" + "'加班'" + ")");

四、HTML中的javascript脚本调用Android本地代码并传递参数ide

window.android.showText('你好')

window后跟的android为别名,须要前端开发人员与移动端开发人员定义统一的别名函数

相关文章
相关标签/搜索