WebView与Js交互

最新推荐文章于 2024-06-05 20:11:08 发布

回归的阿廖

最新推荐文章于 2024-06-05 20:11:08 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Android

本文链接：https://blog.youkuaiyun.com/aliaooooo/article/details/46408527

上周五，老大让临时搞一个评分app，俩页面，第一个页面显示所有待评分的物业，第二个页面是对应物业的评分页面。评分页面是表格样式的，所以就让web端的同学写个html，我们通过Webview去展示。这里不仅仅是展示就完了，web页面需要知道我们点击的哪个物业以及所填评委的名字并显示在html上，所以客户端需要把这两个值传给html。当评委评分完后点击html里的提交按钮并提交成功后，客户端也需要进行响应。做法就是客户端提供接口，js代码去调用来获取值——JS调用Android本地代码来实现。

今天主要总结两点：一是使用Js去调用客户端公有方法，二是从客户端调用Js中的方法

一、JS调用客户端公有方法

上例子：（PS：不会写JS，就网上找了一段js代码）

新建项目，在项目的assets文件夹下创建一个test.html：

<body>
<a>Web与Js交互:点击我，来调用客户端的show方法吧</a>
<script>
    function funFromjs(){
    	document.getElementById("helloweb").innerHTML="我是JS里的方法";
    }
    var aTag = document.getElementsByTagName('a')[0];
    aTag.addEventListener('click', function(){
        //调用android本地方法
		AppFunction.show("Js调用show()方法成功！");
        return false;
    }, false);
    </script>
<p></p>
<div id="helloweb">
</div>
</body>

这段代码有两个重点，一是funFromjs()方法，该方法是js里提供给客户端去调用的方法。二是AppFunction.show();show()方法是客户端提供给js去调用的方法，AppFunction是定义的接口名。底下是客户端的实现：

package com.aliao.web;

import android.annotation.SuppressLint;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.Toast;


public class MainActivity extends ActionBarActivity {

    private WebView mWebView;

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


    private void initViews() {
        String url = "file:///android_asset/test.html";
        mWebView = (WebView) findViewById(R.id.webview);
        mWebView.getSettings().setJavaScriptEnabled(true);//支持js
        mWebView.addJavascriptInterface(this, "AppFunction");
        mWebView.loadUrl(url);
    }

    @JavascriptInterface
    public void show(String msg){
        Toast.makeText(this, msg, Toast.LENGTH_SHORT).show();
    }

}

这里需要注意的是，在Android4.2.2及之后的版本只有带有JavascriptInterface注释的public方法才能够被js访问。所以要在show()方法