【Android】Java代码和内嵌HTML网页JS代码互相调用

1.创建一个空项目

用Android studio创建一个空项目
【Android】Java代码和内嵌HTML网页JS代码互相调用_第1张图片
【Android】Java代码和内嵌HTML网页JS代码互相调用_第2张图片

2. 初始化项目

将项目设置成project视图
【Android】Java代码和内嵌HTML网页JS代码互相调用_第3张图片
点击src,选择new,新建一个文件夹
【Android】Java代码和内嵌HTML网页JS代码互相调用_第4张图片
选择main\assets
【Android】Java代码和内嵌HTML网页JS代码互相调用_第5张图片
将html文件放在该目录下(css、js等也都一起放过来)
【Android】Java代码和内嵌HTML网页JS代码互相调用_第6张图片


3.编写代码

完整代码在后边,看第5部分。这里的只是为了便于划分代码功能

3.1 java调用js

java代码

button.setOnClickListener(view -> {
    webView.loadUrl("javascript:responseJava('java调用js')");
});

JavaScript代码

function responseJava(str) {
	$("#show").html(str)
}

3.2 js调用java

javascript代码

// 从js调用java方法
function requestJava(){
	// 调用Java方法
	window.AndroidToast.show(info)
}

java代码

public class AndroidToast {
    /**
     * 展示弹窗
     * @param str html页面返回的输入的文本数据
     */
    @JavascriptInterface
    public void show(String str) {
        Toast.makeText(MainActivity.this, str, Toast.LENGTH_SHORT).show();
    }
}

4.运行

4.1 java调用js

点击调用js按钮,可以看到网页上的文本发生了变化
【Android】Java代码和内嵌HTML网页JS代码互相调用_第7张图片


4.2 js调用java

点击调用java按钮后可以看到安卓弹出消息条显示文本框内容
【Android】Java代码和内嵌HTML网页JS代码互相调用_第8张图片


5. 整体代码

html代码

DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>title>
head>
<script src="jquery-1.8.3.js">script>
<script>
		// 从js调用java方法
		function requestJava(){
			info = $("#input_info").val()
			$("#input_info").val(info + 1)
			info = $("#input_info").val()

			// 调用java代码
			window.AndroidToast.show(info)
		}
		// 从java调用js方法
		function responseJava(str) {
			$("#show").html(str)
		}
	script>
<body>
<input id="input_info" />
<button id="html_btn" onclick="requestJava()">调用javabutton>
<p id="show">暂无调用p>
body>
html>

效果如下图:
在这里插入图片描述


主页面布局文件


<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/web_view"
        android:layout_width="match_parent"
        android:layout_height="500dp" />

    <Button
        android:id="@+id/call_js"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="调用js" />
LinearLayout>

效果如下图:
【Android】Java代码和内嵌HTML网页JS代码互相调用_第9张图片


主活动java代码

package priv.happy.java_js_eachother;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
		
        WebView webView = findViewById(R.id.web_view);
        // 加载网页
        webView.loadUrl("file:///android_asset/index.html");
       // 初始化
        WebSettings webSettings = webView.getSettings();
        // 允许js
        webSettings.setJavaScriptEnabled(true);
        // 设置默认字符编码
        webSettings.setDefaultTextEncodingName("UTF-8");
        // 添加js接口
        webView.addJavascriptInterface(new AndroidToast(), "AndroidToast");

        Button button = findViewById(R.id.call_js);
        button.setOnClickListener(view -> {
            webView.loadUrl("javascript:responseJava('java调用js')");
        });
    }
    // 自定义的消息提示类
    //  @JavascriptInterface:作用是把AndroidToast类映射为Javascript中的AndroidToast对象
    public class AndroidToast {
        /**
         * 展示弹窗
         * @param str html页面返回的输入的文本数据
         */
        @JavascriptInterface
        public void show(String str) {
            Toast.makeText(MainActivity.this, str, Toast.LENGTH_SHORT).show();
        }
    }
}

参考

https://blog.csdn.net/fyj568213959/article/details/52777403

你可能感兴趣的:(android,javascript,java)