Android 使用js呼叫Java

石曼迪發表於2016-08-23
AndroidJSJava

效果如：

image

主要用到一個介面類：MyObject

package com.example.jsdemo;

import android.content.Context;
import android.support.v7.app.AlertDialog;
import android.webkit.JavascriptInterface;
import android.widget.Toast;


public class MyObject {
    private Context context;
    public MyObject(Context context) {
        this.context = context;
    }

    //將顯示Toast和對話方塊的方法暴露給JS指令碼呼叫
    @JavascriptInterface
    public void showToast(String name) {
        Toast.makeText(context, name+"我是後臺追加的", Toast.LENGTH_SHORT).show();
    }

    @JavascriptInterface
    public void showDialog() {
        new AlertDialog.Builder(context)
                .setTitle("標題")
                .setMessage("我是Java不帶參").create().show();
    }
}
View Code

MainActivity實現如： 

package com.example.jsdemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {
    private WebView wView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        wView = (WebView) findViewById(R.id.wView);
        wView.loadUrl("file:///android_asset/demo1.html");
        WebSettings webSettings = wView.getSettings();
        //①設定WebView允許呼叫js
        webSettings.setJavaScriptEnabled(true);
        webSettings.setDefaultTextEncodingName("UTF-8");
        //②將object物件暴露給Js,呼叫addjavascriptInterface
        wView.addJavascriptInterface(new MyObject(MainActivity.this), "myObj");
    }
}
View Code

然後是main的佈局： 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="hello_world"
        android:id="@+id/textView" />
    <WebView
        android:id="@+id/wView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="5dp" />


</RelativeLayout>
View Code

最後是html檔案： 

<html>
<head>
    <title>Js呼叫Android</title>
</head>

<body>
<input type="button" value="JS呼叫Java（帶參）" onclick="myObj.showToast('我是Js引數~');"/>
<input type="button" value="JS呼叫Java（不帶參）" onclick="myObj.showDialog();"/>
</body>
</html>
View Code

原始碼下載

相關文章