Android與JavaScript之間的相互調用

時間 2019-11-06

標籤 android javascript 之間相互調用欄目 Android 简体版

原文原文鏈接

首先，先大致說一下流程：javascript

1. Android顯示網頁須要使用WebView，因此，定義一個WebViewhtml

2. 設置WebView控件能夠執行JavaScriptjava

3. 使用addJavascriptInterface方法聲明容許JavaScript調用Android的方法android

4. 使用@javascriptInterface註解一個方法，此方法就是web端須要調用的web

5. 使用loadUrl去加載一個HTML頁面(能夠是本地也能夠是網絡的)網絡

大概流程就是這樣了，下面咱們看代碼：app

主界面的佈局activity_main.xml：ide

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <Button
        android:id="@+id/id_bt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        android:text="調用JavaScript" />
    <WebView
        android:id="@+id/id_web"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/id_bt" />
</RelativeLayout>

須要加載的HTML頁面，個人頁面是放在本地的，複製到本身項目的assets的目錄下佈局

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="window.android.testJS()">JS invoke android method</button>
</body>
</html>

注意：頁面中onclick中的android必須和下邊 mWebView.addJavascriptInterface(MainActivity.this, "android")中的一致
this

主界面的代碼：

package com.example.testother;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebSettings.LayoutAlgorithm;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends Activity {
 private WebView mWebView;
 private WebSettings mWebSettings;
 private Button mBt;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        
        mBt = (Button) findViewById(R.id.id_bt);
        mWebView = (WebView) findViewById(R.id.id_web);
        
        mWebSettings = mWebView.getSettings();
  mWebSettings.setJavaScriptEnabled(true); //1. 設置WebView能夠執行JavaScript
  mWebSettings.setSupportZoom(true);
  mWebSettings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
  // 提升渲染等級
  mWebSettings.setRenderPriority(WebSettings.RenderPriority.HIGH);
        
        mWebView.loadUrl("file:///android_asset/testH5.html");
        //2. 聲明容許JavaScript調用Android應用的方法
        mWebView.addJavascriptInterface(MainActivity.this, "android");
       
        mWebView.setWebViewClient(new WebViewClient(){
         @Override
         public void onPageFinished(WebView view, String url) {
          super.onPageFinished(view, url);
          //3. Android中調用JS中方法
                mBt.setOnClickListener(new OnClickListener() {
           @Override
           public void onClick(View v) {
            mWebView.loadUrl("javascript:myFunction()");
           }
          });
         }
        });
    }
    
    //4 供JS調用的方法(必須使用@JavascriptInterface註解)
    @JavascriptInterface
    public void testJS(){
     Toast.makeText(this, "this is android method", Toast.LENGTH_SHORT).show();
    }

}

主界面中佈局中有一個Button和WebView控件，WebView加載的HTML頁面中也有一個button，點擊主界面的button會執行HTML頁面中JavaScript的myFunction()方法，點擊HTML頁面中的button，則會執行Android 中的testJS()方法

效果圖：