Android JavaScript-Funktionen in WebView aufrufen

Ich versuche, einige javascriptFunktionen aufzurufen , die auf einer htmlSeite in einem ausgeführt werden android webview. Ziemlich einfach, was der Code unten versucht - rufen Sie in der Android-App eine javascriptFunktion mit einer Testnachricht auf, die eine Java-Funktion in der Android-App zurückruft, die die Testnachricht per Toast anzeigt.

Die javascriptFunktion sieht aus wie:

function testEcho(message){
     window.JSInterface.doEchoTest(message);
}

In WebView habe ich javascriptohne Glück versucht, die folgenden Methoden aufzurufen :

myWebView.loadUrl("javascript:testEcho(Hello World!)");
mWebView.loadUrl("javascript:(function () { " + "testEcho(Hello World!);" + "})()");

Ich habe javascriptauf dem aktiviertWebView

myWebView.getSettings().setJavaScriptEnabled(true);
// register class containing methods to be exposed to JavaScript
myWebView.addJavascriptInterface(myJSInterface, "JSInterface"); 

Und hier ist die JavaKlasse

public class JSInterface{

private WebView mAppView;
public JSInterface  (WebView appView) {
        this.mAppView = appView;
    }

    public void doEchoTest(String echo){
        Toast toast = Toast.makeText(mAppView.getContext(), echo, Toast.LENGTH_SHORT);
        toast.show();
    }
}

Ich habe viel Zeit damit verbracht, zu googeln, um zu sehen, was ich möglicherweise falsch mache. Alle Beispiele, die ich gefunden habe, verwenden diesen Ansatz. Hat hier jemand etwas falsch gesehen?

Bearbeiten: Es gibt mehrere andere externe javascriptDateien, auf die verwiesen und die in verwendet htmlwerden. Könnten sie das Problem sein?

Ich habe herausgefunden, was das Problem war: fehlende Anführungszeichen im Parameter testEcho (). So bekam ich den Ruf zur Arbeit:

myWebView.loadUrl("javascript:testEcho('Hello World!')");

Ab Kitkat verwenden Sie stattdessen die evaluJavascript-Methode loadUrl, um die folgenden Javascript-Funktionen aufzurufen

    if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT) {
        webView.evaluateJavascript("enable();", null);
    } else {
        webView.loadUrl("javascript:enable();");
    }

public void run(final String scriptSrc) { 
        webView.post(new Runnable() {
            @Override
            public void run() { 
                webView.loadUrl("javascript:" + scriptSrc); 
            }
        }); 
    }

Ich habe einen schönen Wrapper erstellt, um JavaScript-Methoden aufzurufen. Außerdem werden JavaScript-Fehler im Protokoll angezeigt:

private void callJavaScript(String methodName, Object...params){
    StringBuilder stringBuilder = new StringBuilder();
    stringBuilder.append("javascript:try{");
    stringBuilder.append(methodName);
    stringBuilder.append("(");
    for (int i = 0; i < params.length; i++) {
        Object param = params[i];
        if(param instanceof String){
            stringBuilder.append("'");
            stringBuilder.append(param.toString().replace("'", "\\'"));
            stringBuilder.append("'");
        }
        if(i < params.length - 1){
            stringBuilder.append(",");
        }
    }
    stringBuilder.append(")}catch(error){Android.onError(error.message);}");
    webView.loadUrl(stringBuilder.toString());
}

Sie müssen dies auch hinzufügen:

private class WebViewInterface{

    @JavascriptInterface
    public void onError(String error){
        throw new Error(error);
    }
}

Und fügen Sie diese Schnittstelle zu Ihrer Webansicht hinzu:

webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new WebViewInterface(), "AndroidErrorReporter");

Ja, Sie haben den Syntaxfehler. Wenn Sie Ihre Javascript-Fehler und Druckanweisungen in Ihrem Logcat erhalten möchten, müssen Sie die onConsoleMessage(ConsoleMessage cm)Methode in Ihrem WebChromeClient implementieren. Es gibt die vollständigen Stack-Traces wie die Webkonsole (Inspect-Element). Hier ist die Methode.

public boolean onConsoleMessage(ConsoleMessage cm) 
    {
        Log.d("Message", cm.message() + " -- From line "
                             + cm.lineNumber() + " of "
                             + cm.sourceId() );
        return true;
    }

Nach der Implementierung erhalten Sie Ihre Javascript-Fehler und print-Anweisungen ( console.log) auf Ihrem Logcat.

Änderung der @ Ilya_Gazman-Antwort

    private void callJavaScript(WebView view, String methodName, Object...params){
        StringBuilder stringBuilder = new StringBuilder();
        stringBuilder.append("javascript:try{");
        stringBuilder.append(methodName);
        stringBuilder.append("(");
        String separator = "";
        for (Object param : params) {               
            stringBuilder.append(separator);
            separator = ",";
            if(param instanceof String){
                stringBuilder.append("'");
            }
                stringBuilder.append(param.toString().replace("'", "\\'"));
            if(param instanceof String){
                stringBuilder.append("'");
            }

        }
        stringBuilder.append(")}catch(error){console.error(error.message);}");
        final String call = stringBuilder.toString();
        Log.i(TAG, "callJavaScript: call="+call);


        view.loadUrl(call);
    }

erstellt JS-Aufrufe korrekt, z

callJavaScript(mBrowser, "alert", "abc", "def");
//javascript:try{alert('abc','def')}catch(error){console.error(error.message);}
callJavaScript(mBrowser, "alert", 1, true, "abc");
//javascript:try{alert(1,true,'abc')}catch(error){console.error(error.message);}

Beachten Sie, dass Objekte nicht korrekt übergeben werden. Sie können sie jedoch serialisieren, bevor Sie sie als Argument übergeben.

Außerdem habe ich geändert, wohin der Fehler führt. Ich habe ihn in das Konsolenprotokoll umgeleitet, das abgehört werden kann von:

    webView.setWebChromeClient(new CustomWebChromeClient());

und Client

class CustomWebChromeClient extends WebChromeClient {
    private static final String TAG = "CustomWebChromeClient";

    @Override
    public boolean onConsoleMessage(ConsoleMessage cm) {
        Log.d(TAG, String.format("%s @ %d: %s", cm.message(),
                cm.lineNumber(), cm.sourceId()));
        return true;
    }
}

activity_main.xml

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

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

MainActivity.java

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

import com.bluapp.androidview.R;

public class WebViewActivity3 extends AppCompatActivity {
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_view3);
        webView = (WebView) findViewById(R.id.webView);
        webView.setWebViewClient(new WebViewClient());
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("file:///android_asset/webview1.html");


        webView.setWebViewClient(new WebViewClient(){
            public void onPageFinished(WebView view, String weburl){
                webView.loadUrl("javascript:testEcho('Javascript function in webview')");
            }
        });
    }
}

Assets-Datei

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>WebView1</title>
<meta forua="true" http-equiv="Cache-Control" content="max-age=0"/>
</head>

<body style="background-color:#212121">
<script type="text/javascript">
function testEcho(p1){
document.write(p1);
}
</script>
</body>

</html>