Android WebView使用与JavaScript交互

首先在Module下的assets目录下导入两个本地的.html文件,我们知道assets目录下的文件是被原封不动的打包进apk的

在这里插入图片描述

web_view.html

//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();

}

测试页面无参数的JS调用java代码
有参数的调用java代码

你还喜欢他吗可是我也好喜欢你跳转页面

diao_yue.html

//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;
}

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

function testFunc(){

window.WebViewFunc.jsCallWebView();

}

新页面 java代码
java代码

虽说强扭的瓜不甜但是扭下来我就开心

1.创建调用类
package com.example.administrator.myapplication;

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

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();
}

}

2.创建调用类

package com.example.administrator.myapplication;

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

/**

Created by liuxu on 2019/8/13.
*/

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();
}

}

3.创建调用类

package com.example.administrator.myapplication;

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 2019/8/13.
*/

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);
}

}

4.Mainactivity.java

package com.example.administrator.myapplication;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private Button btn1;
private Button btn2;
private WebView wv_java_call_js;

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

private void initView() {
    btn1 = (Button) findViewById(R.id.btn_a);
    btn2 = (Button) findViewById(R.id.btn_b);
    wv_java_call_js = (WebView) findViewById(R.id.wv_java_call_js);
    //设置WebView支持JS
    wv_java_call_js.getSettings().setJavaScriptEnabled(true);
    //从assets目录下加载html
    wv_java_call_js.loadUrl("file:///android_asset/web_view.html");
    //自定义WebView的背景颜色,设置为透明色
    wv_java_call_js.setBackgroundColor(Color.TRANSPARENT);
    //设置背景图片
    wv_java_call_js.setBackgroundResource(R.drawable.psb);
    MWebViewClient mWebViewClient = new MWebViewClient(wv_java_call_js,this);
    wv_java_call_js.setWebViewClient(mWebViewClient);
    MWebChromeClient mWebChromeClient = new MWebChromeClient(this);
    wv_java_call_js.setWebChromeClient(mWebChromeClient);
    //添加js调用android(java)的方法接口
    MJavascriptInterface mJavascriptInterface = new MJavascriptInterface(this);
    wv_java_call_js.addJavascriptInterface(mJavascriptInterface,"web_view");
    wv_java_call_js.addJavascriptInterface(mJavascriptInterface,"diao_yui");
    btn1.setOnClickListener(this);
    btn2.setOnClickListener(this);
}

@Override
public void onClick(View v) {
    switch (v.getId()) {
        case R.id.btn_a:
            wv_java_call_js.loadUrl("javascript:javacalljs()"); // 无参数调用
            break;
        case R.id.btn_b:
            wv_java_call_js.loadUrl("javascript:javacalljsparam(" + "'java代码传递值到JS代码'" + ")"); // 有参数调用
            break;
    }
}

}

5.activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

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

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

    <Button
        android:id="@+id/btn_b"
        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>

6.效果图

在这里插入图片描述

在这里插入图片描述
如果想上传别的html效果自己写 .html 页面进行这种方式上传即可

Android WebView使用与JavaScript交互

猜你喜欢