Android与JS交互

最新推荐文章于 2024-09-13 18:05:26 发布

Aramis_L

最新推荐文章于 2024-09-13 18:05:26 发布

阅读量250

点赞数

分类专栏： Android 文章标签： android javascript webview

本文链接：https://blog.csdn.net/kk243728611/article/details/68958822

版权

Android 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Java调用JS

新建html文件（注意位置 assets文件夹与res并列
使用WebView调用js代码
java调用本地html文件
```
webView.loadUrl("file:///android_asset/HoHo.html");
```
- html文件要与js文件同时放在assets文件夹下，其他文件调用不到js文件

使用WebView调用js代码

webView.loadUrl("javascript:javaCallJs()");

js代码：

var times=1;
var javaCallJs = function () {
    b = !b;
    document.getElementById('p').innerHTML = b ? 'java 调用' : 'java 再调用';
}

java调用js，使用：webView.loadUrl(“javascript:

JS调用Java

为WebView加上设置
java webView.addJavascriptInterface(JSActivity.this, "aramis");
- 参数1：js的映射类。参数2：别名
js调用的方法
java @JavascriptInterface public void jsCallJava() { b = !b; content_java.setText(b ? "js 调用" : "js 再调用"); }
html调用
html <button onclick="window.aramis.jsCallJava()">call Java</button>
- οnclick= window+别名+java方法名

全部代码

java：JSActivity.class

public class JSActivity extends AppCompatActivity {
    private WebView webView;
    private TextView content_java;
    private boolean b;

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_js);
        webView = (WebView) findViewById(webview);
        content_java = (TextView) findViewById(R.id.content_java);
        initWebView();
    }

    private void initWebView() {
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("file:///android_asset/HoHo.html");

        if (Build.VERSION.SDK_INT >= 17) {
            webView.addJavascriptInterface(JSActivity.this, "aramis");
        }
    }

    @JavascriptInterface
    public void jsCallJava() {
        b = !b;
        content_java.setText(b ? "js 调用" : "js 再调用");
    }

    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.firstbutton:
                webView.loadUrl("javascript:javaCallJs()");
                break;
            case R.id.secondbutton:
                break;
        }
    }
}

activity布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/webview"
        android:background="#acc"
        android:orientation="vertical">

        <TextView
            android:id="@+id/content_java"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="this is java" />

        <Button
            android:id="@+id/firstbutton"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:onClick="onClick"
            android:text="first" />

        <Button
            android:id="@+id/secondbutton"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:onClick="onClick"
            android:text="second" />

    </LinearLayout>
</RelativeLayout>

HoHo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript" src="HoHoJs.js"></script>
</head>
<body style="background-color: aqua">
<p onclick="hoho()">html content :
    <span id="p">this is p element</span></p>
<button onclick="hohoWithP('你猜')">button1</button>
<button id="button2" onclick="onButton2Click()">button2</button>

<script>
    var a=false;
    function onButton2Click() {
        a=!a;
        document.getElementById('p').innerHTML = a?'内部button2 click':'内部button2 又click';
    }
</script>
<div>
    <button onclick="window.aramis.jsCallJava()">call Java</button>
</div>
</body>
</html>

HoHoJs.js

var b = false;
var hoho=function () {
b=!b;
document.getElementById('p').innerHTML = b ? "我是大帅哥" : "我不是大帅哥";
//  alert('this is hoho');
};

var hohoWithP=function (str) {
   let c=str;
   b=!b;
   document.getElementById('p').innerHTML = b ? `${c}我是大帅哥` : `${c}我不是大帅哥`;
}

var times=1;
var javaCallJs = function () {
    b = !b;
    document.getElementById('p').innerHTML = b ? 'java 调用' : 'java 再调用';
}