安卓WebView与JavaScript交互

说明：

本文主要介绍安卓和JavaScript的交互：js调用安卓有参、js调用安卓无参、安卓调用js有参、安卓调用js无参

一、JS调用Android并传参

Android代码

public class MainActivity extends Activity {
    private WebView webView;

     @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = (WebView) findViewById(R.id.webView);

        //设置WebView支持JavaScript
        webView.getSettings().setJavaScriptEnabled(true);

        String url = "http://xxx.html";
        webView.loadUrl(url);

        //在js中调用本地java方法
        webView.addJavascriptInterface(new JsInterface(), "AndroidWebView");

        //添加客户端支持
        webView.setWebChromeClient(new WebChromeClient());
    }

    private class JsInterface {
        public JsInterface() {
        }

        //在js中调用window.AndroidWebView.showInfoFromJs(name)，便会触发此方法。
        @JavascriptInterface
        public void showInfoFromJs(String name) {
            //TODO 本地方法
        }
    }
}

JS代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />

<title>Android WebView 与 Javascript 交互</title>
<head>
  <style>
  body {background-color:#e6e6e6}
  .rect
  {
    color:white;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:16px;
    width:100px;
    padding:6px;
    background-color:#98bf21;
    text-decoration:none;
    text-align:center;
    border:none;
    cursor:pointer;
  }

  .inputStyle {font-size:16px;padding:6px}
  </style>
</head>

<body>
  <p>测试Android WebView 与 Javascript 交互</p>
  <input id = "name_input" class = "inputStyle" type="text"/>
  <a class = "rect" οnclick="sendInfoToJava()">JS调用Java</a>

  <script>
  function sendInfoToJava(){
    //调用android程序中的方法，并传递参数
    var name = document.getElementById("name_input").value;
    window.AndroidWebView.showInfoFromJs(name);
  }
  </script>
</body>
</html>

扫描二维码关注公众号，回复： 8768147 查看本文章

二、JS调用Android不传参

Android代码

private class JsInterface {
        public JsInterface() {
        }

        //在js中调用window.AndroidWebView.showInfoFromJs(name)，便会触发此方法。
        @JavascriptInterface
        public void showInfoFromJs() {
            //TODO 本地方法
        }
    }

JS代码

<script>
  function sendInfoToJava(){
    //调用android程序中的方法，无参数
    window.AndroidWebView.showInfoFromJs();
  }
 </script>

三、Android调用js并传参

Android代码

public class MainActivity extends Activity {
    private WebView webView;

     @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = (WebView) findViewById(R.id.webView);

        //设置WebView支持JavaScript
        webView.getSettings().setJavaScriptEnabled(true);

        String url = "http://xxx.html";
        webView.loadUrl(url);

        //添加客户端支持
        webView.setWebChromeClient(new WebChromeClient());
    }
   
    //button点击事件
    public void sendInfoToJs(View view) {  
        String msg = ((EditText) findViewById(R.id.input_et)).getText().toString();  
        //调用js中的函数：showInfoFromJava(msg)  
        webView.loadUrl("javascript:showInfoFromJava('" + msg + "')");  
    }  
}

JS代码

<script>
//android代码调用此方法
function showInfoFromJava(msg){
alert("来自客户端的信息："+msg);
}
</script>

四、Android调用js不传参

Android代码

//button点击事件
    public void sendInfoToJs(View view) {  
        //调用js中的函数：showInfoFromJava(msg)  
        webView.loadUrl("javascript:showInfoFromJava()");  
    }

JS代码

<script>
//android代码调用此方法
function showInfoFromJava(){
alert("来自客户端的调用");
}
</script>

注意：

Android调用js方法，如果在oncreate方法中调用，js是不会执行的，需要延迟加载，哪怕只是1毫秒

webview.postDelayed(new Runnable() {
	@Override
	public void run() {
		webview.loadUrl("javascript:showInfoFromJava();
	}
}, 1);

huangwenkui1990

发布了33 篇原创文章 · 获赞 20 · 访问量 8万+

私信关注

安卓WebView与JavaScript交互

猜你喜欢