Android webview 混合开发 HTML(JS)与Java 的交互

于 2021-12-22 10:51:42 发布
阅读量1.3k 收藏 4
点赞数
分类专栏： Android 文章标签： webview html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44177244/article/details/122080157
版权

webview WebSettings 说明

	WebSettings webSettings = webView.getSettings();
	
	webSettings.setJavaScriptEnabled(true); -> 是否开启JS支持
	webSettings.setPluginsEnabled(true); -> 是否开启插件支持
	webSettings.setJavaScriptCanOpenWindowsAutomatically(true); -> 是否允许JS打开新窗口
	
	webSettings.setUseWideViewPort(true); -> 缩放至屏幕大小
	webSettings.setLoadWithOverviewMode(true); -> 缩放至屏幕大小
	webSettings.setSupportZoom(true); -> 是否支持缩放
	webSettings.setBuiltInZoomControls(true); -> 是否支持缩放变焦，前提是支持缩放
	webSettings.setDisplayZoomControls(false); -> 是否隐藏缩放控件
	
	webSettings.setAllowFileAccess(true); -> 是否允许访问文件
	webSettings.setDomStorageEnabled(true); -> 是否节点缓存
	webSettings.setDatabaseEnabled(true); -> 是否数据缓存
	webSettings.setAppCacheEnabled(true); -> 是否应用缓存
	webSettings.setAppCachePath(uri); -> 设置缓存路径
	
	webSettings.setMediaPlaybackRequiresUserGesture(false); -> 是否要手势触发媒体
	webSettings.setStandardFontFamily("sans-serif"); -> 设置字体库格式
	webSettings.setFixedFontFamily("monospace"); -> 设置字体库格式
	webSettings.setSansSerifFontFamily("sans-serif"); -> 设置字体库格式
	webSettings.setSerifFontFamily("sans-serif"); -> 设置字体库格式
	webSettings.setCursiveFontFamily("cursive"); -> 设置字体库格式
	webSettings.setFantasyFontFamily("fantasy"); -> 设置字体库格式
	webSettings.setTextZoom(100); -> 设置文本缩放的百分比
	webSettings.setMinimumFontSize(8); -> 设置文本字体的最小值(1~72)
	webSettings.setDefaultFontSize(16); -> 设置文本字体默认的大小
	
	webSettings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); -> 按规则重新布局
	webSettings.setLoadsImagesAutomatically(false); -> 是否自动加载图片
	webSettings.setDefaultTextEncodingName("UTF-8"); -> 设置编码格式
	webSettings.setNeedInitialFocus(true); -> 是否需要获取焦点
	webSettings.setGeolocationEnabled(false); -> 设置开启定位功能
	webSettings.setBlockNetworkLoads(false); -> 是否从网络获取资源

在WebView启用javascript

	// 在WebView启用javascript
	mWebView.getSettings().setJavaScriptEnabled(true);

JS调用JAVA函数的接口类

  	/**
     * 用于对接JS的接口内部类
     */
    static class JSORJAVA {

        @JavascriptInterface
        public void startFunction() {
            Toast.makeText(JSJAVAActivity.this, "js调用了java方法", Toast.LENGTH_SHORT).show();
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    msgView.setText(msgView.getText() + "\njs调用了java方法");
                }
            });
        }

        @JavascriptInterface
        public void startFunctionWithParam(final String str) {
            Toast.makeText(JSJAVAActivity.this, str, Toast.LENGTH_SHORT).show();
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    msgView.setText(msgView.getText() + "\njs调用了java方法传递参数：" + str);
                }
            });
        }
    }

在webview中添加调用Java方法的接口

注意函数的第二值"javatojs",这个在后面HTML中调用Java方法需要用到。

        //在webview中添加调用Java方法的接口
        mWebView.addJavascriptInterface(new JSORJAVA(), "javatojs");

Java 调用JS的函数

Java 调用的方法是：mWebView.loadUrl(String url)，url参数需要以javascript:开头,后面跟js中函数名称
javascript:+函数名（）

Button button = (Button) findViewById(R.id.button);
Button button2 = (Button) findViewById(R.id.button2);
button.setOnClickListener(btnClickListener);
button2.setOnClickListener(btnClickListener);
View.OnClickListener btnClickListener = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            switch (v.getId()) {
                case R.id.button:
                    // 无参数调用
                    mWebView.loadUrl("javascript:javacalljs()");
                    break;
                case R.id.button2:
                    // 传递参数调用
                    mWebView.loadUrl("javascript:javacalljswithargs(" + "'hello world'" + ")");
                    break;
                default:
                    break;
            }
        }
    };

对应JS中的函数方法是：

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

        function javacalljswithargs(arg) {
            document.getElementById("content").innerHTML +=
                ("<br\>java调用了js函数并传递参数：" + arg);
        }
    </script>

JS调用Java 函数：

调用方式：window.接口定义参数.java中函数名（）,这个接口对应参数是第3步函数中的"javatojs"。

<button onClick="b()">调用java代码</button>
<br/>
<!--这里传了参数 hello word -->
<button onClick="b1('hello world')">调用java代码并传参</button>
<br/>

  <script type="text/javascript">
        function b() {
            //TODO 这里还可干web的其他事情

            //这里调用java的方法
            window.javatojs.startFunction();
        }

        function b1(msg) {
            //TODO 这里还可干web的其他事情

            //这里调用java的方法，并传递参数msg
            window.javatojs.startFunctionWithParam(msg);
        }
    </script>

全部代码：

activty:

package com.simon.web;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class JSROJAVAActivity extends AppCompatActivity {
    private WebView mWebView = null;
    private TextView msgView = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_jsjavaactivity);
        mWebView = (WebView) findViewById(R.id.webview);
        msgView = (TextView) findViewById(R.id.msg);
        // 启用javascript
        mWebView.getSettings().setJavaScriptEnabled(true);
        // 加载assets目录下面的html
        mWebView.loadUrl("file:///android_asset/test.html");

        Button button = (Button) findViewById(R.id.button);
        Button button2 = (Button) findViewById(R.id.button2);
        button.setOnClickListener(btnClickListener);
        button2.setOnClickListener(btnClickListener);
        //添加js调用Java方法的接口,注意第二个参数，这里要和js代码对应
        mWebView.addJavascriptInterface(new JSORJAVA(), "javatojs");
    }

    View.OnClickListener btnClickListener = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            switch (v.getId()) {
                case R.id.button:
                    // 无参数调用
                    mWebView.loadUrl("javascript:javacalljs()");
                    break;
                case R.id.button2:
                    // 传递参数调用
                    mWebView.loadUrl("javascript:javacalljswithargs(" + "'hello world'" + ")");
                    break;
                default:
                    break;
            }
        }
    };

    /**
     * 用于对接JS的接口内部类
     */
    static class JSORJAVA {

        @JavascriptInterface
        public void startFunction() {
            Toast.makeText(JSJAVAActivity.this, "js调用了java方法", Toast.LENGTH_SHORT).show();
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    msgView.setText(msgView.getText() + "\njs调用了java方法");
                }
            });
        }

        @JavascriptInterface
        public void startFunctionWithParam(final String str) {
            Toast.makeText(JSJAVAActivity.this, str, Toast.LENGTH_SHORT).show();
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    msgView.setText(msgView.getText() + "\njs调用了java方法传递参数：" + str);
                }
            });
        }
    }
}

xml

<?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">

    <WebView
            android:id="@+id/webview"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="3" />

    <ScrollView
            android:id="@+id/scrollView1"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:layout_height="0dp">

        <TextView
                android:id="@+id/msg"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="以下Android的内容：" />
    </ScrollView>

    <Button
            android:id="@+id/button"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="java调用js函数" />

    <Button
            android:id="@+id/button2"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="java调用js函数并传参" />

</LinearLayout>

html

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312">
    <script type="text/javascript">
        function javacalljs() {
            document.getElementById("content").innerHTML +=
                "<br\>java调用了js函数";
        }

        function javacalljswithargs(arg) {
            document.getElementById("content").innerHTML +=
                ("<br\>java调用了js函数并传递参数：" + arg);
        }

        function b() {
            //TODO 这里还可干web的其他事情

            //这里调用java的方法
            window.javatojs.startFunction();
        }

        function b1(msg) {
            //TODO 这里还可干web的其他事情

            //这里调用java的方法，并传递参数msg
            window.javatojs.startFunctionWithParam(msg);
        }


    </script>
</head>
<body>
这是WebView中HTML的类容<br/>
<button onClick="b()">调用java代码</button>
<br/>
<!--这里传了参数 hello word -->
<button onClick="b1('hello world')">调用java代码并传参</button>
<br/>
<div id="content">HTML内容显示:</div>
</body>
</html>
Simon66991
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值