Android 与 html 的简单交互

最新推荐文章于 2024-07-08 02:26:33 发布

zeqiao

最新推荐文章于 2024-07-08 02:26:33 发布

阅读量1.4k

点赞数 1

分类专栏： Android 文章标签： Android html js 交互

本文链接：https://blog.csdn.net/zeqiao/article/details/84642800

版权

Android 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

简单理一理 Android 与 html 的之间的交互样式

一、基本准备

1、本 Demo 直接加载 assets 文件夹下面的 html 文件，来进行交互开发

2、Android 与 html 的之间的交互需要通过 JS，所以要 setJavaScriptEnabled(true)，不然调用不了 JS

二、html 调用 Android 中的 Java 方法

1、直接在 Android 指定类中创建待调用方法

mWebView.addJavascriptInterface(this, "test002");
... ...
@JavascriptInterface
public void showToast(String msg) {
	Toast.makeText(this, msg, Toast.LENGTH_SHORT).show();
}

<input type="button" value="调用Android-A-直接" onClick="android:test002.showToast('A-直接-我是大帅哥')"/>

这里要注意的地方：
① html 如果要调用 Android 中的方法，就得把该方法所在类及类标识传入 html，供 html 调用：

// 在 Android 把类及类标识传入 html
mWebView.addJavascriptInterface(this, "test002");

// 这里的类标识是 test002

// 在 html 中通过类标识调用指定方法
<!--方式一-->
javascript:test002.showToast("Js-我是大帅哥");
<!--方式二-->
android:test002.showToast("A-我是大帅哥");

② Android 中待调用方法要加上 @JavascriptInterface 注解
③ 调用时，html 及 Android 所对应的类标识、方法名要一样

2、在 Android 特定类中创建待调用方法

专门写一个类来维护和管理 Android 中供 html 调用的方法

// 这里的类标识是 JsInterface
mWebView.addJavascriptInterface(new JsInterface(), "JsInterface");
... ...
private class JsInterface {
	@JavascriptInterface
	public void showToast(String msg) {
		Toast.makeText(Test002Activity.this, "JsInterface：" + msg, Toast.LENGTH_SHORT).show();
	}
}

// 这里的类标识是 JsInterface
function showToastTwo(){
	javascript:JsInterface.showToast("我是大帅哥");
}

三、Android 调用 html 中的 JS 方法

1、调用无参 JS 方法

调用 innerHTML，插入修改 html 中的文字：

// 按钮的 onClick 方法
public void inner(View view) {
	mWebView.loadUrl("javascript:showInner()");
}

<p id="content">混合开发</p>
... ...
function showInner(){
	document.getElementById("content").innerHTML="Hello World!";
}

调用 alert，弹出一个 alert 提示弹窗：

// 按钮的 onClick 方法
public void alert(View view) {
	mWebView.loadUrl("javascript:showAlert()");
}

function showAlert(){
	alert("Hello World!");
}

这里要注意的是，要加上下面的监听，不然不能弹出 alert 提示弹窗：

mWebView.setWebChromeClient(new WebChromeClient()); // 调用 alert 必须设置

WebViewClient 主要帮助 WebView 处理各种通知、请求事件
WebChromeClient 主要辅助 WebView 处理 Javascript 的对话框、网站图标、网站 title、加载进度等

2、调用有参 JS 方法

	// 按钮的 onClick 方法
    public void count(View view) {
        int a = 1;
        mWebView.loadUrl("javascript:count(" + a + ")");
    }
    ... ...
    @JavascriptInterface
    public void onSum(int sum) {
        Toast.makeText(this, "onSum-返回结果：" + sum, Toast.LENGTH_SHORT).show();
    }

    function count(a){
        javascript:test002.onSum(a*10+3);
    }

3、调用带返回值的 JS 方法

上面的 function count(a) 中的 javascript:test002.onSum(a*10+3) 其实可以算是一种返回值方式，一种间接的返回值方式，在 Android 4.4 后，就有了一种直接的返回值方式

	// 按钮的 onClick 方法
    public void sum(View view) {
        // 【4.4及以上返回方式】
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            mWebView.evaluateJavascript("sum(5,1)", new ValueCallback<String>() {
                @Override
                public void onReceiveValue(String value) {
                    Toast.makeText(Test002Activity.this, "4.4返回结果：" + value, Toast.LENGTH_SHORT).show();
                }
            });
        }
    }

    function sum(a,b){
        javascript:test002.onSum(a*10+b);
        return a*10+b;
    }

四、代码

1、html

<html>

<head>
    <meta charset="UTF-8"/>
</head>

<body>
<p id="content">混合开发</p>
<input type="button" value="调用Android" onClick="showToast()"/>
<input type="button" value="调用Android-JsInterface" onClick="showToastTwo()"/>
<input type="button" value="调用Android-A-直接" onClick="android:test002.showToast('A-直接-我是大帅哥')"/>
<input type="button" value="调用Android-Js-直接" onClick="javascript:test002.showToast('Js-直接-我是大帅哥')"/>
</body>

<script type="text/javascript">

    function showInner(){
        document.getElementById("content").innerHTML="Hello World!";
    }

    function showAlert(){
        alert("Hello World!");
    }

    function count(a){
        javascript:test002.onSum(a*10+3);
    }

    function sum(a,b){
        javascript:test002.onSum(a*10+b);
        return a*10+b;
    }

    function showToast(){
        <!--javascript:test002.showToast("Js-我是大帅哥");-->
        android:test002.showToast("A-我是大帅哥");
    }

    function showToastTwo(){
        javascript:JsInterface.showToast("我是大帅哥");
    }

</script>

</html>

2、Android

public class Test002Activity extends AppCompatActivity {

    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_FULLSCREEN);
        setContentView(R.layout.activity_test002);
        initWebView();
    }

    @SuppressLint("SetJavaScriptEnabled")
    private void initWebView() {
        mWebView = (WebView) findViewById(R.id.wv_test);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.loadUrl("file:///android_asset/test002.html");
        mWebView.setWebChromeClient(new WebChromeClient()); // 调用 alert 必须设置
        mWebView.addJavascriptInterface(this, "test002"); // 用于 html 返回值给 Android【4.4以下】
        mWebView.addJavascriptInterface(new JsInterface(), "JsInterface");
    }

    public void inner(View view) {
        mWebView.loadUrl("javascript:showInner()");
    }

    public void alert(View view) {
        mWebView.loadUrl("javascript:showAlert()");
    }

    public void count(View view) {
        int a = 1;
        mWebView.loadUrl("javascript:count(" + a + ")");
    }

    public void sum(View view) {
        // 【4.4及以上返回方式】
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            mWebView.evaluateJavascript("sum(5,1)", new ValueCallback<String>() {
                @Override
                public void onReceiveValue(String value) {
                    Toast.makeText(Test002Activity.this, "4.4返回结果：" + value, Toast.LENGTH_SHORT).show();
                }
            });
        }
    }

    @JavascriptInterface
    public void onSum(int sum) {
        Toast.makeText(this, "onSum-返回结果：" + sum, Toast.LENGTH_SHORT).show();
    }

    @JavascriptInterface
    public void showToast(String msg) {
        Toast.makeText(this, msg, Toast.LENGTH_SHORT).show();
    }

    private class JsInterface {
        @JavascriptInterface
        public void showToast(String msg) {
            Toast.makeText(Test002Activity.this, "JsInterface：" + msg, Toast.LENGTH_SHORT).show();
        }
    }
}

参考文章：
1、https://www.cnblogs.com/zhangqie/p/6387433.html
2、https://blog.csdn.net/leejizhou/article/details/50894531/
3、https://blog.csdn.net/linghu_java/article/details/6927439

zeqiao

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Android 与 html 的简单交互

简单理一理 Android 与 html 的之间的交互样式一、基本准备1、本 Demo 直接加载 assets 文件夹下面的 html 文件，来进行交互开发2、Android 与 html 的之间的交互需要通过 JS，所以要 setJavaScriptEnabled(true)，不然调用不了 JS二、html 调用 Android 中的 Java 方法1、直接在 Android 指定类...
复制链接

扫一扫

专栏目录