WebView使用与JavaScript交互详解(附完整Demo代码)

最新推荐文章于 2024-06-20 12:06:28 发布

沉睡的雄狮

最新推荐文章于 2024-06-20 12:06:28 发布

阅读量4.8k

点赞数 2

分类专栏： android 文章标签： javascript html5 交互 webview

本文链接：https://blog.csdn.net/liuxu841911548/article/details/54911033

版权

android 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

最近项目中需要用到与HTML5交互,也就是WebView的使用,与JS的交互肯定必不可少.开始写项目之前写了个测试Demo,成功完成了Java与JS的相互调用.先看效果图
点击上方2个Button成功调取并改变了HTML5中的内容

点击H5中无参数调用Java代码成功弹出了吐司

点击图中含参数调用java代码成功弹出吐司并传递参数成功

下面上完整代码:
首先在Module下的assets目录下有两个本地的.html文件,我们知道assets目录下的文件是被原封不动的打包进apk的.如下图所示
assets目录结构如图所示

web.html

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

//Java调用JS代码无参数
function javacalljs(){
     document.getElementById("content").innerHTML +=     
         "<br\>java调用了js函数";  
}

//Java调用JS代码有参数
function javacalljsparam(param){
     document.getElementById("content").innerHTML +=     
         "<br\>java调用了js函数含参数param"+param;  
}

function testFunc(){

    window.WebViewFunc.jsCallWebView();
}

</script>

<title>测试页面</title>
</head>
<body>
<a onClick="window.web.jsCallWebView()">无参数JS调用java代码</a><br/>
<a onClick="window.web.jsCallWebView('含有参数')">含参数调用java代码</a><br/>
<br />
<div id="content">内容显示 <a href="jump.html" target="_self">跳转新页面jump.html</a></div>  
</body>
</html>

jump.html

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

//Java调用JS代码无参数



function javacalljs(){
     document.getElementById("content").innerHTML +=     
         "<br\>java调用了js函数";  
}

//Java调用JS代码有参数
function javacalljsparam(param){
     document.getElementById("content").innerHTML +=     
         "<br\>java调用了js函数含参数param"+param;  
}

function testFunc(){

    window.WebViewFunc.jsCallWebView();
}

</script>

<title>测试页面</title>
</head>
<body>
<a onClick="window.jump.jsCallWebView()">无参数JS调用java代码</a><br/>
<a onClick="window.jump.jsCallWebView('含有参数')">含参数调用java代码</a><br/>
<br />
<div id="content">内容显示</div>  
</body>
</html>

JavaCallJSActivity.java

public class JavaCallJSActivity extends AppCompatActivity {

    @BindView(R.id.btn1)
    Button mBtn1;
    @BindView(R.id.btn2)
    Button mBtn2;
    @BindView(R.id.wv_java_call_js)
    WebView mWvJavaCallJs;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_java_call_js);
        ButterKnife.bind(this);
        initViews();
    }

    private void initViews() {
        //设置WebView支持JS
        mWvJavaCallJs.getSettings().setJavaScriptEnabled(true);
        //从assets目录下加载html
        mWvJavaCallJs.loadUrl("file:///android_asset/web.html");
        //自定义WebView的背景颜色,设置为透明色
        mWvJavaCallJs.setBackgroundColor(Color.TRANSPARENT);
        //设置背景图片
        mWvJavaCallJs.setBackgroundResource(R.drawable.bgcolorblue);
        MWebViewClient mWebViewClient = new MWebViewClient(mWvJavaCallJs,this);
        mWvJavaCallJs.setWebViewClient(mWebViewClient);
        MWebChromeClient mWebChromeClient = new MWebChromeClient(this);
        mWvJavaCallJs.setWebChromeClient(mWebChromeClient);
        //添加js调用android(java)的方法接口
        MJavascriptInterface mJavascriptInterface = new MJavascriptInterface(this);
        mWvJavaCallJs.addJavascriptInterface(mJavascriptInterface,"web");
        mWvJavaCallJs.addJavascriptInterface(mJavascriptInterface,"jump");


    }


    @OnClick({R.id.btn1, R.id.btn2})
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.btn1:
                mWvJavaCallJs.loadUrl("javascript:javacalljs()"); // 无参数调用
                break;
            case R.id.btn2:
                mWvJavaCallJs.loadUrl("javascript:javacalljsparam(" + "'从java代码传递参数到了JS代码'" + ")"); // 有参数调用
                break;
        }
    }
}

activity_java_call_js.xml

<?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:id="@+id/activity_java_call_js"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.geocompass.html5test.activity.JavaCallJSActivity">

    <LinearLayout
        android:id="@+id/ll_top"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="java调用无参数js"/>

        <Button
            android:id="@+id/btn2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="java调用有参数js"/>

    </LinearLayout>

    <WebView
        android:id="@+id/wv_java_call_js"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/ll_top"></WebView>

</RelativeLayout>

MJavascriptInterface.java

public class MJavascriptInterface {
    private Context mContext;

    public MJavascriptInterface(Context context) {
        mContext = context;
    }

    /**
     * JS调用Android(Java)无参数的方法
     */
    @JavascriptInterface
    public void jsCallWebView() {
        Toast.makeText(mContext, "JS Call Java!",
                Toast.LENGTH_SHORT).show();
    }

    /**
     * JS调用Android(Java)含参数的方法
     * @param param
     */
    @JavascriptInterface
    public void jsCallWebView(String param) {
        Toast.makeText(mContext, "JS Call Java!" + param,
                Toast.LENGTH_SHORT).show();
    }


}

MWebChromeClient.java

package com.geocompass.html5test.webview;

import android.content.Context;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.widget.Toast;

/**
 * Created by liuxu on 2017/2/7.
 */

public class MWebChromeClient extends WebChromeClient {
    private Context mContext;

    public MWebChromeClient(Context context) {
        mContext = context;
    }

    /**
     * JS调用Android(Java)无参数的方法
     */
    @JavascriptInterface
    public void jsCallWebView() {
        Toast.makeText(mContext, "JS Call Java!",
                Toast.LENGTH_SHORT).show();
    }

    /**
     * JS调用Android(Java)含参数的方法
     * @param param
     */
    @JavascriptInterface
    public void jsCallWebView(String param) {
        Toast.makeText(mContext, "JS Call Java!" + param,
                Toast.LENGTH_SHORT).show();
    }
}

MWebViewClient.java

package com.geocompass.html5test.webview;

import android.content.Context;
import android.graphics.Bitmap;
import android.net.http.SslError;
import android.util.Log;
import android.webkit.SslErrorHandler;
import android.webkit.WebView;
import android.webkit.WebViewClient;

/**
 * Created by liuxu on 2017/2/7.
 */

public class MWebViewClient extends WebViewClient {
    private static final String TAG = "MWebViewClient";
    private WebView mWebView;
    private Context mContext;

    public MWebViewClient(WebView webView, Context context) {
        mWebView = webView;
        mContext = context;
    }

    /**
     * 在点击请求的是链接是才会调用，
     * 重写此方法返回true表明点击网页里面的链接还是在当前的webview里跳转，不跳到浏览器那边。
     */
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        // 使用自己的WebView组件来响应Url加载事件，而不是使用默认浏览器器加载页面
        mWebView.loadUrl(url);
        // 记得消耗掉这个事件。给不知道的朋友再解释一下，Android中返回True的意思就是到此为止,
        // 事件就会不会冒泡传递了，我们称之为消耗掉
        return true;
    }

    /**
     * 页面开始加载时调用的方法
     * @param view
     * @param url
     * @param favicon
     */
    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        Log.e(TAG, "onPageStarted: " );
        super.onPageStarted(view, url, favicon);
    }

    /**
     * 页面加载完成调用的方法
     * @param view
     * @param url
     */
    @Override
    public void onPageFinished(WebView view, String url) {
        Log.e(TAG, "onPageFinished: " );
        super.onPageFinished(view, url);
    }

    /**
     * 在加载页面资源时会调用，每一个资源（比如图片）的加载都会调用一次。
     */
    @Override
    public void onLoadResource(WebView view, String url) {
//      Toast.makeText(context, "WebViewClient.onLoadResource", Toast.LENGTH_SHORT).show();
        Log.e("WebActivity", "onLoadResource");
        super.onLoadResource(view, url);
    }

    /**
     * 重写此方法可以让WebView支持https请求
     * @param view
     * @param handler
     * @param error
     */
    @Override
    public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
        super.onReceivedSslError(view, handler, error);
    }
}

我写的代码中用到了最新的ButterKnife注解,需要在Project和Module的build.gradle中添加一些代码,不会的请看我之前写过的一篇博客:http://blog.csdn.net/liuxu841911548/article/details/54906660

WebView还有很多方法,体现了其强大之处,后续用到再继续补充.
如有不足之处请指正.

沉睡的雄狮

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
WebView使用与JavaScript交互详解(附完整Demo代码)

最近项目中需要用到与HTML5交互,也就是WebView的使用,与JS的交互肯定必不可少.开始写项目之前写了个测试Demo,成功完成了Java与JS的相互调用.先看效果图下面上完整代码: 首先在Module下的assets目录下有两个本地的.html文件,我们知道assets目录下的文件是被原封不动的打包进apk的.如下图所示 web.html<html><head><meta http
复制链接

扫一扫

专栏目录