suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Java- und JavaScript-Interaktion in Android

Detaillierte Erläuterung der Java- und JavaScript-Interaktion in Android

黄舟
黄舟Original
2017-03-15 17:30:581692Durchsuche

Android bietet ein sehr leistungsfähiges WebView-Steuerelement für die Verarbeitung von Webseiten, und in der Webseite ist JavaScript ein weiteres sehr wichtiges Skript. In diesem Artikel wird erläutert, wie gegenseitige Aufrufe zwischen Java-Code und Javascript-Code implementiert werden.

So realisieren Sie

Es ist sehr praktisch, die Interaktion zwischen Java und js zu realisieren. Normalerweise sind nur die folgenden Schritte erforderlich.

  • WebView ermöglicht die Ausführung von JavaScript-Skripten

  • WebView legt eine interaktive Schnittstelle für JavaScript-Aufrufe fest.

  • Der Client und die Webseite schreiben Code, um sich gegenseitig aufzurufen.

Dieser Beispielcode

Der Einfachheit halber wird der gesamte Code zuerst gepostet

Java-Code

package com.example.javajsinteractiondemo;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class MainActivity extends Activity {
  private static final String LOGTAG = "MainActivity";
  @SuppressLint("JavascriptInterface")
  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      final WebView myWebView = (WebView) findViewById(R.id.myWebView);
      WebSettings settings = myWebView.getSettings();
      settings.setJavaScriptEnabled(true);
      myWebView.addJavascriptInterface(new JsInteration(), "control");
      myWebView.setWebChromeClient(new WebChromeClient() {});
      myWebView.setWebViewClient(new WebViewClient() {

          @Override
          public void onPageFinished(WebView view, String url) {
              super.onPageFinished(view, url);
              testMethod(myWebView);
          }

      });
      myWebView.loadUrl("file:///android_asset/js_java_interaction.html");
  }

  private void testMethod(WebView webView) {
      String call = "javascript:sayHello()";

      call = "javascript:alertMessage(\"" + "content" + "\")";

      call = "javascript:toastMessage(\"" + "content" + "\")";

      call = "javascript:sumToJava(1,2)";
      webView.loadUrl(call);

  }

  public class JsInteration {

      @JavascriptInterface
      public void toastMessage(String message) {
          Toast.makeText(getApplicationContext(), message, Toast.LENGTH_LONG).show();
      }

      @JavascriptInterface
      public void onSumResult(int result) {
          Log.i(LOGTAG, "onSumResult result=" + result);
      }
  }

}

Front-End-Webcode 

<html>
<script type="text/javascript">
    function sayHello() {
        alert("Hello")
    }

    function alertMessage(message) {
        alert(message)
    }

    function toastMessage(message) {
        window.control.toastMessage(message)
    }

    function sumToJava(number1, number2){
       window.control.onSumResult(number1 + number2)
    }
</script>
Java-Javascript Interaction In Android
</html>

Aufrufbeispiel

js ruft Java auf

Das Aufrufformat ist window.jsInterfaceName.methodName(parameterValues) In diesem Beispiel verwenden wir control as der Name der Injektionsschnittstelle. 

function toastMessage(message) {
  window.control.toastMessage(message)
}

function sumToJava(number1, number2){
   window.control.onSumResult(number1 + number2)
}

Java ruft JS auf

Das Grundformat von WebView, das JS aufruft, ist webView.loadUrl("javascript:methodName(parameterValues)")

Aufruf von JS ohne Parameter und kein RückgabewertFunktion 

String call = "javascript:sayHello()";
webView.loadUrl(call);

JS-Funktion mit Parametern und ohne Rückgabewert aufrufen

Beachten Sie, dass für Zeichenfolge als Parameterwert das Doppelte gilt Anführungszeichen müssen maskiert werden. 

String call = "javascript:alertMessage(\"" + "content" + "\")";
webView.loadUrl(call);

Aufrufen von JS-Funktionen mit Parametern und Rückgabewerten

Android stellte vor 4.4 keine Methode zum direkten Aufrufen von JS-Funktionen und zum Abrufen von Werten bereit, daher war die allgemeine Idee davor Java ruft die js-Methode auf. Nachdem die js-Methode ausgeführt wurde, wird der Java-Code erneut aufgerufen, um den Wert zurückzugeben.

1.Java ruft JS-Code auf

String call = "javascript:sumToJava(1,2)";
webView.loadUrl(call);

2.js-Funktionsverarbeitung und gibt das Ergebnis durch Aufrufen der Java-Methode zurück

function sumToJava(number1, number2){
       window.control.onSumResult(number1 + number2)
}

3.Java in der Rückrufmethode Get Der Rückgabewert der js-Funktion in 

@JavascriptInterface
public void onSumResult(int result) {
  Log.i(LOGTAG, "onSumResult result=" + result);
}

4.4-Verarbeitung

Verwenden Sie „evalueJavascript“ nach Android 4.4. Hier ist ein einfaches interaktives Beispiel einer js-Methode mit einem Rückgabewert 

function getGreetings() {
      return 1;
}

Java-Code beim Aufruf der evaluateJavascript-Methode 

private void testEvaluateJavascript(WebView webView) {
  webView.evaluateJavascript("getGreetings()", new ValueCallback<String>() {

  @Override
  public void onReceiveValue(String value) {
      Log.i(LOGTAG, "onReceiveValue value=" + value);
  }});
}

Ausgabeergebnis

I/MainActivity( 1432): onReceiveValue value=1

Hinweis

  • Das oben Gesagte beschränkt das Rückgabeergebnis auf String. Bei einfachen Typen wird versucht, in einen String umgewandelt und zurückgegeben zu werden Es wird empfohlen, es in Stringform zurückzugeben. Der json wird zurückgegeben.

    • evaluateJavascript-Methode muss im UI-Thread (Hauptthread) aufgerufen werden, damit onReceiveValue auch im Hauptthread ausgeführt wird.

    • Fragen und Antworten

Warnung kann nicht angezeigt werden

Sie sollten WebChromeClient nicht eingerichtet haben, folgen Sie dem folgenden Code, um es einzurichten up

myWebView.setWebChromeClient(new WebChromeClient() {});
Uncaught ReferenceError: functionName is not definiert

Der Grund für das Problem ist, dass

der js-Code der Webseite nicht geladen wurde

, daher wird die js-Methode aufgerufen. Die Lösung besteht darin, die js-Methode 

myWebView.setWebViewClient(new WebViewClient() {

  @Override
  public void onPageFinished(WebView view, String url) {
      super.onPageFinished(view, url);
      //在这里执行你想调用的js函数
  }

});
Uncaught TypeError:

Object [object Object] has no methodSafety Restriction issues

Wenn das Problem nur auf Maschinen mit Version 4.2 oder höher auftritt, liegt das Problem darin, dass das System Sicherheitsbeschränkungen unterliegt. In der Android-Dokumentation steht Folgendes:

Achtung: Wenn Sie Ihre targetSdkVersion auf 17 oder höher gesetzt haben, müssen Sie die Annotation @JavascriptInterface zu jeder Methode hinzufügen, die in Ihrem Webseitencode verfügbar sein soll (die Methode muss auch öffentlich sein). Wenn Sie die Anmerkung nicht bereitstellen, ist die Methode bei Ausführung unter Android 4.2 oder höher nicht zugänglich.

Die chinesische Bedeutung ist

Warnung: Wenn Ihr Programm auf Plattform 17 oder höher abzielt, müssen Sie der von der Webseite aufrufbaren Methode die Annotation @JavascriptInterface

hinzufügen (diese Methode muss öffentlich sein). Wenn Sie dies nicht tun, kann die Webseite auf Plattformen 4.2 und höher nicht auf Ihre Methode zugreifen.

Zwei Lösungen

Setzen Sie targetSdkVersion auf 17 oder höher und führen Sie die Annotation @JavascriptInterface ein

  • Erstellen Sie eine Annotationsschnittstelle Benennen Sie selbst @JavascriptInterface und importieren Sie es dann. Beachten Sie, dass diese Schnittstelle nicht verwechselt werden kann.

  • Hinweis: Erstellen Sie @JavascriptInterface-Code

Code-Verschleierungsproblem

public @interface JavascriptInterface {

}
Wenn es in der unverschleierten Version normal ausgeführt wird, wird es auch normal ausgeführt die verschleierte Version. Der Code wird falsch ausgeführt und meldet Uncaught TypeError: Object [object Object] has no method, d. h. Sie haben keine verschleierte Ausnahmebehandlung durchgeführt. Fügen Sie Code wie diesen zur verschleierten Datei hinzu

Alle WebView-Methoden müssen im selben Thread aufgerufen werden
-keep class com.example.javajsinteractiondemo$JsInteration {
    *;
}

Filterprotokolle haben dieses Problem entdeckt.

Der Java-Callback-Thread nach dem js-Aufruf ist nicht der Haupt-Thread. Wenn Sie das Protokoll drucken, können Sie es überprüfen 

E/StrictMode( 1546): java.lang.Throwable: A WebView method was called on thread &#39;JavaBridge&#39;. 
All WebView methods must be called on the same thread. (Expected Looper Looper (main, tid 1) {528712d4} called on Looper (JavaBridge, tid 121) {52b6678c}, 
FYI main Looper is Looper (main, tid 1) {528712d4})
E/StrictMode( 1546):   at android.webkit.WebView.checkThread(WebView.java:2063)
E/StrictMode( 1546):   at android.webkit.WebView.loadUrl(WebView.java:794)
E/StrictMode( 1546):   at com.xxx.xxxx.xxxx.xxxx.xxxxxxx$JavaScriptInterface.onCanGoBackResult(xxxx.java:96)
E/StrictMode( 1546):   at com.android.org.chromium.base.SystemMessageHandler.nativeDoRunLoopOnce(Native Method)
E/StrictMode( 1546):   at com.android.org.chromium.base.SystemMessageHandler.handleMessage(SystemMessageHandler.java:27)
E/StrictMode( 1546):   at android.os.Handler.dispatchMessage(Handler.java:102)
E/StrictMode( 1546):   at android.os.Looper.loop(Looper.java:136)
E/StrictMode( 1546):   at android.os.HandlerThread.run(HandlerThread.java:61)

Um die obige Ausnahme zu lösen, fügen Sie einfach den Webview-Vorgang in den Hauptthread ein. 

ThreadInfo=Thread[WebViewCoreThread,5,main]

webView.post(new Runnable() {
    @Override
    public void run() {
        webView.loadUrl(YOUR_URL).
    }
});

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Java- und JavaScript-Interaktion in Android. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Einführung in das leistungsstarke JavaScript-Responsive-Diagramm Chartist.js (Bild und Text)Nächster Artikel：Detaillierte Einführung in das leistungsstarke JavaScript-Responsive-Diagramm Chartist.js (Bild und Text)

In Verbindung stehende Artikel

Mehr sehen