Android和Html5交互简单使用

leilifengxingmw

已于 2022-04-16 17:11:35 修改

阅读量2.2k

点赞数 1

分类专栏： Android 文章标签： Android

于 2016-08-06 11:31:36 首次发布

本文链接：https://blog.csdn.net/leilifengxingmw/article/details/52135289

版权

Android 专栏收录该内容

63 篇文章 1 订阅

订阅专栏

声明网络权限

<!--网络权限-->
<uses-permission android:name="android.permission.INTERNET" />

布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context="com.example.h5demo.MainActivity">
    <!--webbiew控件-->
    <WebView
        android:id="@+id/webview"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/button1"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="调用js"
        android:id="@+id/button"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="调用有参js"
        android:id="@+id/button1"
        android:layout_below="@+id/button"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="34dp" />
</RelativeLayout>

把Android studio 切换到Project视图下，在项目的main目录下新建一个assets目录，然后在assets目录下新建一个file：myhtml，把后缀名改为html

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

    function javacalljs(){
         document.getElementById("content").innerHTML =
             "<br\>Android调用了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="点击调用android代码"    onclick="window.Android.startFunction()"/>
    <br/>
    <input type="button" value="点击调用android代码并传递参数"
       onclick="window.Android.startFunction('js传递给android的参数')"/>
    <input type="button" value="弹出网页对话框" onclick="alert('hello world')"/>
    <input type="button" value="跳转链接" onclick="window.location.href='../myhtml2.html'"/>
    </body>
</html>

2 把网页加载进来很简单，只需：

 //使用loadUrl即可，
 myWebView.loadUrl("file:///android_asset/myhtml.html");

3，但是这样加载进来以后，Android和html还是没办法交互的，要想进行交互，必须对webView进行几项设置

//html页面的跳转都在这个webView上跳转，不会打开手机的浏览器
myWebView.setWebViewClient(new WebViewClient(){
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                //可以在这里显示一个loading 界面
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                //网页加载完毕后，隐藏loading界面
            }
        });
        
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);//启用JavaScript
//下面两句话允许网页弹框
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
myWebView.setWebChromeClient(new WebChromeClient());

4：上面的操作就是为了设置webView和html进行交互。但是这时候Android和html还是不能进行交互，要想实现交互，Android必须和html进行绑定才行

//WebAppInterface 是我们自定义的一个类，通过实例化一个WebAppInterface 对象来和html进行绑定
 WebAppInterface webAppInterface = new WebAppInterface(this);
/**
 *  myWebView.addJavascriptInterface(webAppInterface, "Android");
 *  这方法允许您将一个对象（webAppInterface）通过一个别名（这里我们使用 Android）
 *  绑定到JavaScript,然后JavaScript就可以通过这个别名Android，使用webAppInterface的方法
 */
myWebView.addJavascriptInterface(webAppInterface, "Android");

WebAppInterface 类


package com.example.h5demo;

import android.app.Activity;
import android.webkit.JavascriptInterface;
import android.widget.Toast;

public class WebAppInterface {

    Activity mContext;
    /**
     * Instantiate the interface and set the context
     */
    WebAppInterface(Activity c) {
        mContext = c;
    }

    /**
     * js调用Android的函数
     */
    @JavascriptInterface
    public void startFunction() {
       Toast.makeText(mContext,"我是安卓原生的弹窗",Toast.LENGTH_SHORT).show();
    }
    /**
     * js调用Android的函数并给Android原生传递一个参数
     */
    @JavascriptInterface
    public void  startFunction(String arg) {
       Toast.makeText(mContext,arg,Toast.LENGTH_SHORT).show();
    }
    
}

注意上面的两个方法上都有一个注解，Android官方的说法如下： If you’ve set your targetSdkVersion to 17 or higher, you must add the @JavascriptInterface annotation to any method that you want available to your JavaScript

5:现在在html里面就可以调用android的原生的方法startFunction()和startFunction(String arg)了。html调用的代码如下

<input type="button" value="点击调用android代码" 
        onclick="window.Android.startFunction()"/>
<br/>
<input type="button" value="点击调用android代码并传递参数"
       onclick="window.Android.startFunction('js传递给android的参数')"/>

注意：window.Android.startFunction()，可以看到，我们通过别名Android，然后后面加上Android的原生方法名，就可以调用Android原生方法了。

6：以上是实现了html调用Android的原生方法，接下里我们要实现在Android里面调用html的方法，比如我们想实现点击Android的一个button，让html输出一些文字。继续往下看

@Override
public void onClick(View v) {
    switch (v.getId()) {
        case R.id.button:
            // 不传参数调用JS的方法
            myWebView.loadUrl("javascript:javacalljs()");
        break;
        case R.id.button1:
            // 传递参数调用JS的方法
            myWebView.loadUrl("javascript:javacalljswith('Android调用了JS的有参函数')");
            break;
    }
}

可以看到Android调用html的方法也是很简单的；利用webView的loadUrl方法myWebView.loadUrl（“javascript:javacalljs()”）方法，冒号后面是html里面写的方法名javacalljs()。

7：当html页面跳转的时候，我们还得处理页面的导航事件，重写Activity的onKeyDown方法，当我们点击手机的返回键的时候，进行如下操作


@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    switch (keyCode) {
        case KeyEvent.KEYCODE_BACK://处理返回键事件
            if (myWebView.canGoBack()) {
                myWebView.goBack();//让WebView回退到上一个网页
                return true;
            } else {//如果WebView不能回退
                //提示应用是否退出程序
                MainActivity.this.finish();
            }
        default:
            break;
    }
    return false;
}

到了这里，好像基本说完了，因为我只用过这几个功能，其他高级功能用的时候再研究。附上完整的代码下载链接

代码下载地址

也可以参考 Github上的源码，只不过HTML文件名有点不同而已。

参考链接：

leilifengxingmw

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
Android和Html5交互简单使用

今天记录一下自己接触不多的Android和hml5交互简单使用参考网址如下 http://blog.csdn.net/leejizhou/article/details/50894531 http://blog.csdn.net/fengyuzhengfan/article/details/38326861 https://developer.android.com/guide/webap
复制链接

扫一扫

专栏目录