Android与H5交互—Java调用Js、Js调Java、H5页面调用Android播放视频

GitHub：https://github.com/linweimao/AndroidAndH5Intermodulation

前言

问：为什么学android也要学h5？

答：Android很多软件都有内嵌H5的

问：有什么用处、优势？

答：节约成本，提高开发效率

问：实现的原理是什么？

答：本质是：Java代码和JavaScript调用

开始项目

创建工程名AndroidAndH5

布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@android:color/holo_blue_light"
        android:gravity="center">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Android和H5互调"
            android:textColor="@android:color/black"
            android:textSize="20sp" />

    </LinearLayout>

    <Button
        android:id="@+id/btn_java_and_js"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="1.Java代码和H5代码互调"
        android:textColor="@android:color/black"
        android:textSize="20sp" />

    <Button
        android:id="@+id/btn_js_call_java"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="2.H5调用Android播放视频"
        android:textColor="@android:color/black"
        android:textSize="20sp" />

    <Button
        android:id="@+id/btn_js_call_phone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="3.H5调用Android拨打电话"
        android:textColor="@android:color/black"
        android:textSize="20sp" />
</LinearLayout>

效果图:

初始化布局

public class MainActivity extends Activity implements View.OnClickListener {

    private Button btnJavaAndJs;
    private Button btnJsCallJava;
    private Button btnJsCallPhone;

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

    private void initView() {
        // 初始化
        btnJavaAndJs = (Button) findViewById(R.id.btn_java_and_js);
        btnJsCallJava = (Button) findViewById(R.id.btn_js_call_java);
        btnJsCallPhone = (Button) findViewById(R.id.btn_js_call_phone);
        // 设置点击事件
        btnJavaAndJs.setOnClickListener(this);
        btnJsCallJava.setOnClickListener(this);
        btnJsCallPhone.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        if (v == btnJavaAndJs){
            Toast.makeText(MainActivity.this,"互调",Toast.LENGTH_SHORT).show();
        }else if (v == btnJsCallJava){
            Toast.makeText(MainActivity.this,"播放视频",Toast.LENGTH_SHORT).show();
        }else if (v == btnJsCallPhone){
            Toast.makeText(MainActivity.this,"拨打电话",Toast.LENGTH_SHORT).show();
        }
    }
}

Android和H5互调案例-Java调用Js

新建 AndroidAndJSActivity

修改AndroidAndJSActivity布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@android:color/holo_blue_light"
        android:gravity="center">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="登录页面"
            android:textColor="@android:color/black"
            android:textSize="20sp" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="10dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/bg_shap"
            android:orientation="vertical"
            android:padding="5dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="账号："
                android:textColor="#000000" />

            <EditText
                android:id="@+id/et_number"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="请输入账号..."
                android:textColor="#000000" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="密码："
                android:textColor="#000000" />

            <EditText
                android:id="@+id/et_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="请输入密码..."
                android:password="true"
                android:textColor="#000000" />

            <Button
                android:id="@+id/btn_login"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="登录(加载网络网页)"
                android:textColor="#000000"
                android:textSize="25sp" />

            <Button
                android:id="@+id/btn_login1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="登录(加载本地网页)"
                android:textColor="#000000"
                android:textSize="25sp" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

布局初始化

public class JavaAndJsCallActivity extends Activity implements View.OnClickListener {

    private EditText etNumber;
    private EditText etPassword;
    private Button btnLogin;
    private Button btnLogin1;
    private WebView webView;

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

    private void initView() {
        etNumber = (EditText) findViewById(R.id.et_number);
        etPassword = (EditText) findViewById(R.id.et_password);
        btnLogin = (Button) findViewById(R.id.btn_login);
        btnLogin1 = (Button) findViewById(R.id.btn_login1);
        btnLogin.setOnClickListener(this);
        btnLogin1.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        if (v == btnLogin){
           
        }else if (v == btnLogin1){
          
        }
    }
}

初始化WebView并且加载网络页面

private void initWebView() {
        webView = new WebView(this);
        WebSettings webSettings = webView.getSettings();
        //设置支持javaScript脚步语言
        webSettings.setJavaScriptEnabled(true);

        //支持双击-前提是页面要支持才显示
        webSettings.setUseWideViewPort(true);

        //支持缩放按钮-前提是页面要支持才显示
        webSettings.setBuiltInZoomControls(true);

        //设置客户端-不跳转到默认浏览器中
        webView.setWebViewClient(new WebViewClient());

        //加载网络资源
        webView.loadUrl("https://www.csdn.net/");
        
        //显示页面
        setContentView(webView);
    }

在工程main目录下创建assets目录且加载本地资源

webView.loadUrl("file:///android_asset/www/JavaAndJavaScriptCall.html");

Java调用JavaScript

/**
* Java调用javaScript
* @param numebr
*/

private void login(String numebr) {
webView.loadUrl("javascript:javaCallJs("+"'"+numebr+"'"+")");
   setContentView(webView);
}

JavaScript调Java

配置Javascript接口

//设置支持js调用java
webView.addJavascriptInterface(new AndroidAndJSInterface(),"Android");

实现Javascript接口类

 class AndroidAndJsInterface{
        // 在 JavaAndJavaScriptCall.html 中的按钮点击事件为 java 的 showToast() 方法
        // 将会被 Js 调用
        //  js可以调用该类的方法
        public void showToast(){
            Toast.makeText(JavaAndJsCallActivity.this,"我是Android代码，我被Js调用了！",Toast.LENGTH_SHORT).show();
        }
    }

解决该WebView.addJavascriptInterface接口不起作用的办法

在JavaScript接口类的方法加上@JavascriptInterface注解

class AndroidAndJsInterface{
        // 在 JavaAndJavaScriptCall.html 中的按钮点击事件为 java 的 showToast() 方法
        // 将会被 Js 调用
        //  js可以调用该类的方法
        @JavascriptInterface
        public void showToast(){
            Toast.makeText(JavaAndJsCallActivity.this,"我是Android代码，我被Js调用了！",Toast.LENGTH_SHORT).show();
        }
    }

H5页面调用Android播放视频

JsCallJavaVideoActivity的布局和实例化控件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".JsCallJavaVideoActivity">

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </WebView>
</LinearLayout>

实例化控件并且配置

public class JsCallJavaVideoActivity extends Activity {

    private WebView webview;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_js_call_java_video);
        webview = (WebView) findViewById(R.id.webview);
        // WebView 的用途
        // 1、加载网页(H5、html、自定义浏览器、直接在 WebView 中播放视频)
        // webview = new WebView(this);
        // 设置支持 Js
        WebSettings webSettings = webview.getSettings();
        // 设置支持 Js
        webSettings.setJavaScriptEnabled(true);

        // 不调用系统浏览器(相当于自定义浏览器)
        webview.setWebViewClient(new WebViewClient());


        // js 调用 java
        // 添加 js 的一个接口 JavascriptInterface
        // 以后 Js 就可以通过 Android 这个字段调用 AndroidAndJsInterface 类中的任何方法
        // 字段必须和 οnclick="window.Android.showToast() 中的 Android 保持一致
        webview.addJavascriptInterface(new AndroidAndJsInterface(), "android");

        // 加载本地的网页
        // 这里的 asset 不能有 s
        webview.loadUrl("file:///android_asset/RealNetJSCallJavaActivity.htm");


        // 把 webView 设置为我们可以看见的页面
        // setContentView(webview);
    }

    class AndroidAndJsInterface {
        // 在 JavaAndJavaScriptCall.html 中的按钮点击事件为 java 的 showToast() 方法
        // 将会被 Js 调用
        //  js可以调用该类的方法
        @JavascriptInterface
        public void playVideo(int id, String videoUrl, String title) {
            // 1、把所有的播放器调起来,并且播放(如果系统只有一个播放器就会直接播放)
            Intent intent = new Intent();
            // video/* ：匹配所有的视频格式
            intent.setDataAndType(Uri.parse(videoUrl), "video/*");
            startActivity(intent);
            Toast.makeText(JsCallJavaVideoActivity.this, "videoUrl：" + videoUrl, Toast.LENGTH_SHORT).show();
        }
    }
}

//加载本地资源 webView.loadUrl(“file:///android_asset/RealNetJSCallJavaActivity.htm”);

参照Js代码写Java被调用代码

<!DOCTYPE html>
<html>
<head>
    <meta name="keywords"
          content="ANZO,GAME,LOL,DNF,DOTA,撸啊撸,地下城与勇士,掌游宝,攻略,宝典,模拟器,加点,战报,英雄,最新,最全,最强,视频">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="address=no;email=no">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>移动版</title>
    <link rel="shortcut icon" href="http://api.lol.zhangyoubao.com/img/favicon.jpg">
    <!-- CSS测试地址：<link href="http://static.zhangyoubao.com/web_dev/phone_item_400500.css" type="text/css" rel="stylesheet"/> -->
    <link href="RealNetJSCallJavaActivity_files/phone_item_400500.css" type="text/css"
          rel="stylesheet">
</head>
<body>
<link id="font_size" href="" type="text/css" rel="stylesheet">
<div class="news">
    <div class="mv_name">
        <h1>2020.02.06 H5调用Android播放视频</h1>
        <p>
            <span>作者：丨沫沫然丶</span> <!-- 文章生成时间大于 2020-02-05 0:00，则用新规范取作者和来源 -->
            <span class="separ">|</span>
            <span class="sp_time">2月5日 20:20</span>
        </p>
    </div>
    <div class="news_cont" id="news_cont">
        <div class="mv_box">
            <div class="mv_box_div">
                <p><a id="play" tag="video"><img src="RealNetJSCallJavaActivity_files/stop.png"></a>
                </p>
            </div>
            <img src="RealNetJSCallJavaActivity_files/mpic65411h572d6eaf.jpg" width="100%">
        </div>
        <div class="mv_info">
            <span>时长：7分42秒</span><a id="download" class="download un-down" tag="video"></a>
            <div class="clear"></div>
        </div>
        <div>
            <p>2020.02.06 H5调用Android播放视频<br></p></div>
    </div>

    <div style="border-top: 1px solid #dfdfdf;margin-top: 8px;text-align: center;">
        <a href="http://m.zhangyoubao.com/down/index"
           style="padding: 20px 12px;display: block; color: #ff2a46;text-decoration: none;font-size: 15px;">
            <img src="RealNetJSCallJavaActivity_files/reco.png"
                 style="width: 20px;display: inline-block;height: 20px;position: relative;left: 0;top: 4px;margin-right: 8px; "
                 alt="" height="32" width="32">2020.02.06</a>
    </div>


    <div class="title"><h3>热门评论</h3></div>
    <div class="news_pinglun">
        <img src="RealNetJSCallJavaActivity_files/news_comment_popup_bg.png" style="display: none;">
        <div class="comment-popup">
            <a class="left">
                <span class="left-bg left-bg-unup">顶</span>
            </a>
            <a class="mid">
                <span class="mid-bg">回复</span>
            </a>
            <a class="right2">
                <span class="right2-bg">复制</span>
            </a>
        </div>
        <div class="pl_box" commentid="16633317" userid="16330501" liked="0">
            <div class="avter_box">
                <div class="img-boder-box">
                    <img src="RealNetJSCallJavaActivity_files/defaults.jpg" class="avter_img">
                </div>
            </div>
            <div class="pl_info">
                <p>
                    <span class="sp_name">丨沫沫然丶</span>
                    <span class="up">
                    	                    		<img src="RealNetJSCallJavaActivity_files/news_detail_up_d.png"
                                                         class="thumbs_up">
                    	                    	<em>142</em>
                    </span>
                    <span class="plus_one">+1</span>
                </p>
                <p class="cmt_time"><span class="time">昨天</span></p>
                <p class="text">2020.02.06 10:22<img class="emoji"
                                                              src="RealNetJSCallJavaActivity_files/emoji6.png"><img
                        class="emoji" src="RealNetJSCallJavaActivity_files/emoji6.png"><img
                        class="emoji" src="RealNetJSCallJavaActivity_files/emoji6.png"><img
                        class="emoji" src="RealNetJSCallJavaActivity_files/emoji6.png"><img
                        class="emoji" src="RealNetJSCallJavaActivity_files/emoji6.png"></p>
            </div>
            <div class="clear"></div>
        </div>
        <div class="pl_box" commentid="16633326" userid="12241250" liked="0">
            <div class="avter_box">
                <div class="img-boder-box">
                    <img src="RealNetJSCallJavaActivity_files/56cac4bd12241250s.crop_image"
                         class="avter_img">
                </div>
            </div>
            <div class="pl_info">
                <p>
                    <span class="sp_name">丨沫沫然丶</span>
                    <span class="up">
                    	                    		<img src="RealNetJSCallJavaActivity_files/news_detail_up_d.png"
                                                         class="thumbs_up">
                    	                    	<em>100</em>
                    </span>
                    <span class="plus_one">+1</span>
                </p>
                <p class="cmt_time"><span class="time">昨天</span></p>
                <p class="text">2020.02.06 11:22</p>
            </div>
            <div class="clear"></div>
        </div>
        <div class="pl_box" commentid="16633457" userid="13835010" liked="0">
            <div class="avter_box">
                <div class="img-boder-box">
                    <img src="RealNetJSCallJavaActivity_files/572d957313835010s.crop_image"
                         class="avter_img">
                </div>
            </div>
            <div class="pl_info">
                <p>
                    <span class="sp_name">丨沫沫然丶</span>
                    <span class="up">
                    	                    		<img src="RealNetJSCallJavaActivity_files/news_detail_up_d.png"
                                                         class="thumbs_up">
                    	                    	<em>96</em>
                    </span>
                    <span class="plus_one">+1</span>
                </p>
                <p class="cmt_time"><span class="time">昨天</span></p>
                <p class="text">2020.02.06 12:22</p>
            </div>
            <div class="clear"></div>
        </div>
        <div class="pl_box" commentid="16633383" userid="15432964" liked="0">
            <div class="avter_box">
                <div class="img-boder-box">
                    <img src="RealNetJSCallJavaActivity_files/defaults.jpg" class="avter_img">
                </div>
            </div>
            <div class="pl_info">
                <p>
                    <span class="sp_name">丨沫沫然丶</span>
                    <span class="up">
                    	                    		<img src="RealNetJSCallJavaActivity_files/news_detail_up_d.png"
                                                         class="thumbs_up">
                    	                    	<em>56</em>
                    </span>
                    <span class="plus_one">+1</span>
                </p>
                <p class="cmt_time"><span class="time">昨天</span></p>
                <p class="text">2020.02.06 13:22</p>
            </div>
            <div class="clear"></div>
        </div>
        <div class="pl_box" commentid="16633321" userid="8856396" liked="0">
            <div class="avter_box">
                <div class="img-boder-box">
                    <img src="RealNetJSCallJavaActivity_files/572da6a98856396s.jpg"
                         class="avter_img">
                </div>
            </div>
            <div class="pl_info">
                <p>
                    <span class="sp_name">丨沫沫然丶</span>
                    <span class="up">
                    	                    		<img src="RealNetJSCallJavaActivity_files/news_detail_up_d.png"
                                                         class="thumbs_up">
                    	                    	<em>42</em>
                    </span>
                    <span class="plus_one">+1</span>
                </p>
                <p class="cmt_time"><span class="time">昨天</span></p>
                <p class="text">2020.02.06 14:22<img class="emoji"
                                                 src="RealNetJSCallJavaActivity_files/emoji3.png"><img
                        class="emoji" src="RealNetJSCallJavaActivity_files/emoji3.png"><img
                        class="emoji" src="RealNetJSCallJavaActivity_files/emoji3.png"></p>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>
<script src="RealNetJSCallJavaActivity_files/wqNewsFunc.js"></script>
<script src="RealNetJSCallJavaActivity_files/wqNewsLib.js"></script>
<script>
if(""!="")
var pic = "http://pic.zhangyoubao.com/";
else
var pic = "";
var share_obj = {
    "pic_url":pic,
    "url":"http://lol.zhangyoubao.com/mobiles/shareout/65411",
    "title":"2020.02.06 H5调用Android播放视频",
    "desc":"1级单杀小龙，5级单杀峡谷先锋！"
};
function getShareInfo(uid,channel){
    javascript:android.initShareInfo(share_obj.pic_url,share_obj.url,share_obj.title,share_obj.desc);
}
function getShareInfoIos(){
    return JSON.stringify(share_obj);
}

</script>
<script>
    var emojiBaseUrl="http://static.zhangyoubao.com/public/emoji/";
    var comment_contents=getElementsByClassName('news_pinglun','p','text');
    for(var i=0;i<comment_contents.length;i++){
        comment_contents[i].innerHTML=doEmojiReplace(comment_contents[i].innerHTML);
    }
    var webroot = "/";
    // var ready = "http://static.zhangyoubao.com/lol/img/ready.png";
    //show image on phone
    var objs = document.getElementsByTagName('img');
    var length = objs.length;
    for (i=0; i<length; i++) {
        obj = objs[i];
        obj.onclick = function() {
            if (this.width > 100) {
                var pic_url=this.src.replace('_small','');
                javascript:android.showRawImage(pic_url);
            }
        }
    };
    url = "/mobiles/interActive/65411";
    var videourl = "http://vfx.mtime.cn/Video/2019/06/29/mp4/190629004821240734.mp4";
    var itemid = "65411";
    var itemdesc = "1级单杀小龙，5级单杀峡谷先锋！";    
    var itempic = "http://avatar.anzogame.com/pic_v1/lol/news/20160507/spic65411h572d6eaf.jpg";
    var itemtitle = "6.9玛尔扎哈OP套路教程";
    var obj_play = document.getElementById('play');
    var obj_download = document.getElementById('download');
    if(obj_play != null) {
        obj_play.ontouchstart = function() {
            this.className = 'inter_click';
            javascript:android.playVideo(itemid, videourl, itemtitle);
            ajaxrequest('/stat/item', "POST", true, {type:'play', id:itemid});
        }
        obj_play.ontouchend = function() {
            this.className = 'inter';
        }
    }
    $(document).on("touchstart", '#download', function() {
        var is_down = $("#download").hasClass('al-down');
        if (false === is_down) {
            javascript:android.offlineVideo(itemid, videourl, itemtitle, itemdesc, itempic);
            ajaxrequest('/stat/item', "POST", true, {type:'download', id:itemid});
        }
    });
    function openReference(itemid){
        javascript:android.openReference(itemid);
    }
    function openShare(){
        javascript:android.openShareSoft();
    }
/*   
    var obj_comments = document.getElementById('comment_div');
    obj_comments.ontouchstart = function(){
    
    }
    obj_comments.ontouchend = function(){
        javascript:android.showComments();
    }
*/

</script>
<script>
function changeToModel() {
        var model = arguments[0] ? arguments[0] : '';
        var night = "http://static.zhangyoubao.com/lol/css/night.css";
        if(model == 'toNight') {
            var oCss = document.createElement("link"); 
            oCss.setAttribute("rel", "stylesheet"); 
            oCss.setAttribute("type", "text/css");  
            oCss.setAttribute("href", night);
            oCss.setAttribute("media", "screen");
            document.getElementsByTagName("head")[0].appendChild(oCss);//绑定
        } else {
            var lists = document.getElementsByTagName("link");
            for ( var i = 0; i < lists.length; i++) {
                if (lists[i].getAttribute("href").indexOf("night.css") != -1) {
                    lists[i].parentNode.removeChild(lists[i]);
                }
            }
        }
    }
    changeToModel();

</script>
<script>
    /****
      ** 改变字体大小，传入 large || middle || small
    ***/
    function chgFontSize(size) {
        if ("large"===size) {
            $("#font_size").attr("href", "http://static.zhangyoubao.com/lol/css/large_font.css");
        }
        else if ("small"===size) {
            $("#font_size").attr("href", "http://static.zhangyoubao.com/lol/css/small_font.css");
        }
        else {
            $("#font_size").attr("href", "");
        }
    }
    //   chgFontSize("large");
    /****
      ** 隐藏热门评论弹出
    ***/
    function hideAlert() {
        cPopup.css({display:'none'});
    }

</script>
<script>
    window.addEventListener('load', function() {
            var pinglun = document.querySelector(".news_pinglun");
            new FastClick(pinglun);
    }, false);

</script>
<script>
    /****
      ** 顶+1函数，传入参数commentid
    ***/
    function chgUpNum(cid) {
        var floor =  $('.news_pinglun').find('.pl_box').each(function(){
            var cmtId = parseInt($(this).attr('commentid'), 10);
            var cmtClass = $(this).attr('class');
            var isUpd = parseInt($(this).attr('liked'), 10);
            if (cmtId === parseInt(cid, 10) && cmtClass === 'pl_box' && isUpd === 0) {
                var oldNum = parseInt($(this).find('em').text(), 10);
                var newNum = oldNum + 1;
                $(this).find('em').text(newNum);
                $(this).attr('class', 'pl_box already_upd');
            }
        })
    }
  //chgUpNum('36');

</script>
<script>
	var cPopup = $('.comment-popup');
    /****
      ** 触摸滑动事件，弹出的评论隐藏
    ***/
	$(document.body).on("touchmove",function(){
	    cPopup.css({display:'none'});
	})
    
    var loginFlag = "no";
    function isLogin(and_lgn) {
        loginFlag = and_lgn;
        console.log('loginFlag:', loginFlag);
    }
 //   isLogin('yes');
    
	$('.pl_box').click(function(e){
        var t = e.target;   // 获取点击区域
        var ptext;
        var commentId;
        var userId;
        var nickname;
        var plus_one;
        
        if ( $(t).attr('class') === 'pl_box' ) {    // 点击区域为'.pl_box'
            commentId = $(t).attr('commentid');
            userId = $(t).attr('userid');
            ptext = $(t).find('.text').text();
            nickname = $(t).find('.sp_name').text();
            
            $('.left').unbind('click').click(function(e){    // 顶
                cPopup.css({display:'none'});
                e.preventDefault();
                e.stopPropagation();
                console.log("commentId=", commentId);
                if ($(".left-bg").hasClass("left-bg-unup") === true && loginFlag=== 'yes') {
                    $(".left-bg").addClass('left-bg-alup').removeClass('left-bg-unup');
                    $(t).find('.thumbs_up').attr('src', 'http://static.zhangyoubao.com/lol/img/news_detail_up_p.png');
                    $(t).find('.plus_one').attr('class', 'plus_one plus_show animated fadeOutUp');
                }
                javascript:android.clickUpOperate(commentId, userId); // 调用 java clickUpOperate()
            });
            $('.mid').unbind('click').click(function(e){ // 回复 
                cPopup.css({display:'none'});
                e.preventDefault();
                javascript:android.reply(ptext, commentId, userId, nickname); // 调用 java 的reply()
            });
            $('.right2').unbind('click').click(function(e){   // 复制
                cPopup.css({display:'none'});
                e.preventDefault(); 
                javascript:android.copyContent(ptext); // 调用 java copyContent()
            });
            
            if ($(t).find('.thumbs_up').attr('src') === 'http://static.zhangyoubao.com/lol/img/news_detail_up_d.png') {
                if ($(".left-bg").hasClass("left-bg-unup") === true) {
                    $(".left-bg").removeClass('left-bg-alup');        
                }
                else {
                    $(".left-bg").addClass('left-bg-unup').removeClass('left-bg-alup');
                }
            }
            else {
                if ($(".left-bg").hasClass("left-bg-alup") === true) {
                    $(".left-bg").removeClass('left-bg-unup');        
                }
                else {
                    $(".left-bg").addClass('left-bg-alup').removeClass('left-bg-unup');
                }
            }
            cPopup.css({top:e.pageY - 53 +'px',display:'block',position:'absolute'});
        } else { // 点击区域为'.pl_box'的子元素
            commentId = $(t).parents('.pl_box').attr('commentid');
            userId = $(t).parents('.pl_box').attr('userid');
            ptext = $(t).parents('.pl_box').find('.text').text();
            nickname = $(t).parents('.pl_box').find('.sp_name').text();
            
            $('.left').unbind('click').click(function(e){    // 顶
                cPopup.css({display:'none'});
                e.preventDefault();
                e.stopPropagation();
                if ($(".left-bg").hasClass("left-bg-unup") === true && loginFlag=== 'yes') {
                    $(".left-bg").addClass('left-bg-alup').removeClass('left-bg-unup');
                    $(t).parents('.pl_box').find('.thumbs_up').attr('src', 'http://static.zhangyoubao.com/lol/img/news_detail_up_p.png');
                    $(t).parents('.pl_box').find('.plus_one').attr('class', 'plus_one plus_show animated fadeOutUp');
                }
                javascript:android.clickUpOperate(commentId, userId);
            });
            $('.mid').unbind('click').click(function(){ // 回复 
                cPopup.css({display:'none'});
                e.preventDefault();
                e.stopPropagation();
                javascript:android.reply(ptext, commentId, userId, nickname); // 调用 java 的reply()
            });
            $('.right2').unbind('click').click(function(){   // 复制
                cPopup.css({display:'none'});
                e.preventDefault();
                e.stopPropagation();               
                javascript:android.copyContent(ptext); // 调用 java copyContent()
            });
            
            if (t.tagName === 'IMG' && $(t).parents().attr('class') === 'pl_img') { // 点击用户头像
                cPopup.css({display:'none'});
                javascript:android.clickUserAvatar(userId); // 调用 java clickUserAvatar()
            } else {
                if ($(t).parents('.pl_box').find('.thumbs_up').attr('src') === 'http://static.zhangyoubao.com/lol/img/news_detail_up_d.png') {
                    if ($(".left-bg").hasClass("left-bg-unup") === true) {
                        $(".left-bg").removeClass('left-bg-alup');        
                    }
                    else {
                        $(".left-bg").addClass('left-bg-unup').removeClass('left-bg-alup');
                    }
                }
                else {
                    if ($(".left-bg").hasClass("left-bg-alup") === true) {
                        $(".left-bg").removeClass('left-bg-unup');        
                    }
                    else {
                        $(".left-bg").addClass('left-bg-alup').removeClass('left-bg-unup');
                    }
                }
                cPopup.css({top:e.pageY - 53 +'px',display:'block',position:'absolute'});
            }
        }
	});

</script>
<script>
    Zepto(function($){
        $('.teams').find('.votes').each(function(){
            var l_val = $(this).find('.l-score').html();
            var r_val = $(this).find('.r-score').html();
            var sum = parseInt( l_val ) + parseInt( r_val );
            var l_per = (l_val / sum) * 100 + '%';
            var r_per = (r_val / sum) * 100 + '%';

            $(this).find('.tc1').css('width', l_per);
            $(this).find('.tc2').css('width', r_per);
        });
    });

    $('.t-wrap').unbind('click').click(function(e){
        var m_id = $(this).attr('m_id');
        console.log($(this).attr('m_id'));
        javascript:android.gotoTarget('match', m_id);
    });

</script>
<script>
    Echo.init({
      offset: '500',
      throttle: '250'
    });

</script>


</body>
</html>

配置Javascript接口

//设置支持js调用java
webView.addJavascriptInterface(new AndroidAndJSInterface(),"android");

Javascript接口类

class AndroidAndJSInterface {
    /**
     * 该方法将被js调用
     * @param id
     * @param videoUrl
     * @param tile
     */
    @JavascriptInterface
    public void playVideo(int id, String videoUrl, String title) {
            // 1、把所有的播放器调起来,并且播放(如果系统只有一个播放器就会直接播放)
            Intent intent = new Intent();
            // video/* ：匹配所有的视频格式
            intent.setDataAndType(Uri.parse(videoUrl), "video/*");
            startActivity(intent);
            Toast.makeText(JsCallJavaVideoActivity.this, "videoUrl：" + videoUrl, Toast.LENGTH_SHORT).show();
        }
}

H5页面调用Android拨打电话(没有解决)