Funktion aus externer JavaScript-Datei in WebView aufrufen

  • 3 Antworten
  • Letztes Antwortdatum
A

Android-Torero

Neues Mitglied
0
Hallo zusammen,

beim Versuch, in meine App eine WebView für eine HTML-Seite einzubinden, stoße ich auf folgendes Problem:

Ich bekommen zwar die HTML-Seite angezeigt, der Aufruf einer JavaScript-Funktion, die in eine externe JS-Datei ausgelagert ist, will nicht funktionieren.

Folgenden Code habe ich versucht:
Activity (MainActivity.java):
Code:
public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        WebView myWebView = (WebView) findViewById(R.id.wvJavaScript);
        WebSettings webSettings = myWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        myWebView.addJavascriptInterface(new WebAppInterface(this), "Android");

        String html = readHtml("template.html");
        myWebView.loadDataWithBaseURL("file:///android_asset/", html, "text/html", "utf-8", null);
    }

    private String readHtml(String remoteUrl) {
        String html = "";
        AssetManager assetManager = getApplicationContext().getResources().getAssets();
        BufferedReader in = null;
        try {
            in = new BufferedReader(new InputStreamReader(assetManager.open(remoteUrl)));
            String str;
            while((str = in.readLine()) != null) {
                html += str;
            }
        } catch (Exception e) {
            // TODO: handle exception
        } finally {
            if(in != null) {
                try {
                    in.close();
                } catch (Exception e2) {
                    // TODO: handle exception
                }
            }
        }
        return html;
    }
Das WebAppInterface (WebAppInterface.java):
Code:
public class WebAppInterface {
    Context context;
    
    public WebAppInterface(Context c) {
        this.context = c;
    }

    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(context, toast, Toast.LENGTH_SHORT).show();
    }
    
}
Die HTML-Datei (template.html):
HTML:
<html>
<head>
    <title>TEST</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="file:///android_asset/funktionen.js"></script>
</head>
<body>
<h1>My Web View</h1>
<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />
</body>
</html>
JavaScript (funktionen.js):
Code:
<script type="text/javascript" language="JavaScript">
function showAndroidToast(toast) {
    Android.showToast(toast);
}
</script>
Vielleicht hat jemand von euch eine Idee, warum das so nicht funktioniert bzw., was ich falsch mache. Bin auch für Alternativvorschläge offen, eine externe JS-Datei in eine WebView einzubinden

Gruß
Thore

PS: Noch eine Info vorweg, Die Html- und JS-Datei befinden sich im selben Verzeichnis "assets"
 
Zuletzt bearbeitet:
using javascript in android webview - Stack Overflow

//EDIT: Upps, dachte beim Überfliegen dir fehlt das Interface ... Ich schaus mal nochmal genauer an :p

//EDIT2: Da du das mit der externen JS nochmal so erwähnst ... wenn der Code in der HTML steht, dann funktionierts?
 
Zuletzt bearbeitet:
kleinerkathe schrieb:
using javascript in android webview - Stack Overflow

//EDIT: Upps, dachte beim Überfliegen dir fehlt das Interface ... Ich schaus mal nochmal genauer an :p

//EDIT2: Da du das mit der externen JS nochmal so erwähnst ... wenn der Code in der HTML steht, dann funktionierts?

Hi,

yep, das ist ja das Seltsame. Wenn ich das JavaScript direkt in den HTML-Bereich platziere (egal ob im Head oder Body) dann kann ich die Funktion auch aufrufen. Nur wenn ich das Script in eine externe Datei auslagere nicht. :confused2: Allerdings lade ich das HTML-File dann nicht mit der WebView.loadDataWithBaseURL sondern mit WebView.LoadData
Zur Not könnte ich es auch im HTML drinne lassen, ich weiß allerdings noch nicht, wie viele Funktionen es in der Produktiv-App werden. Denn das Beispiel von oben dient ja mehr zur Einarbeitung und Testzwecken :winki: Daher wäre mir lieber, ich könnte HTML und Script sauber trennen.



Gruß
Thore
 
Nimm mal das <script>-Tag ganz aus der .js Datei und lass nur die Funktion selber drin. <script> ist ja ein HTML-Tag und kein Javascript und den definierst du ja bereits in template.html
 
Zurück
Oben Unten