Android
WebView

Introduktion

Anmärkningar

<uses-permission android:name="android.permission.INTERNET" /> 

JavaScript-varningsdialogrutor i WebView - Hur man får dem att fungera

Som standard implementerar WebView inte JavaScript-varningsdialogrutor, dvs. alert() gör ingenting. För att göra det måste du först aktivera JavaScript (uppenbarligen ..) och sedan ställa in en WebChromeClient att hantera förfrågningar om varningsdialogrutor från sidan:

webView.setWebChromeClient(new WebChromeClient() {
    //Other methods for your WebChromeClient here, if needed..

    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        return super.onJsAlert(view, url, message, result);
    }
});

Här åsidosätter vi onJsAlert , och sedan ringer vi till onJsAlert , som ger oss en standard Android-dialog. Du kan också använda meddelandet och URL själv, till exempel om du vill skapa en anpassad formad dialog eller om du vill logga in dem.

Kommunikation från Javascript till Java (Android)

Android-aktivitet

package com.example.myapp;

import android.os.Bundle;
import android.app.Activity;
import android.webkit.WebView;

public class WebViewActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    
        WebView webView = new WebView(this);
        setContentView(webView);

       /* 
        *   Note the label Android, this is used in the Javascript side of things
        *   You can of course change this.
        */
        webView.addJavascriptInterface(new JavascriptHandler(), "Android");
    
        webView.loadUrl("http://example.com");
    }
}

Java Javascript Handler

import android.webkit.JavascriptInterface;

public class JavascriptHandler {

    /**
     *  Key point here is the annotation @JavascriptInterface
     *
     */
    @JavascriptInterface
    public void jsCallback() {
       // Do something
    }

    @JavascriptInterface
    public void jsCallbackTwo(String dummyData) {
       // Do something
    }
}

Webbsida, Javascript-samtal

<script>
... 
Android.jsCallback();
...
Android.jsCallback('hello test');
...
</script>

Extra tips

Vid en komplex datastruktur är en möjlig lösning använd JSON.

Android.jsCallback('{ "fake-var" : "fake-value", "fake-array" : [0,1,2] }');

På Android-sidan använder du din favorit JSON-tolkare, dvs: JSONObject

Kommunikation från Java till Javascript

Grundläggande exempel

package com.example.myapp;

import android.os.Bundle;
import android.app.Activity;
import android.webkit.WebView;

public class WebViewActivity extends Activity {
    
    private Webview webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);

       webView = new WebView(this);
       webView.getSettings().setJavaScriptEnabled(true);

       setContentView(webView);

       webView.loadUrl("http://example.com");

       /*
        * Invoke Javascript function
        */
       webView.loadUrl("javascript:testJsFunction('Hello World!')");
    }

   /**
    * Invoking a Javascript function
    */
   public void doSomething() {
     this.webView.loadUrl("javascript:testAnotherFunction('Hello World Again!')");
   }
}

Exempel på öppna uppringare

Om webbsidan a innehåller telefonnummer kan du ringa ett samtal med telefonens uppringare. Den här koden söker efter url-adressen som börjar med tel: gör sedan en avsikt att öppna uppringaren och du kan ringa till det klickade telefonnumret:

public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if (url.startsWith("tel:")) { 
            Intent intent = new Intent(Intent.ACTION_DIAL,
                    Uri.parse(url)); 
            startActivity(intent); 
    }else if(url.startsWith("http:") || url.startsWith("https:")) {
        view.loadUrl(url);
    }
    return true;
}

Felsökning av WebView genom att skriva ut konsolmeddelanden eller med fjärrfelsökning

Skriva ut webview-konsolmeddelanden till logcat

För att hantera console meddelanden från webbsida du kan åsidosätta onConsoleMessage i WebChromeClient :

final class ChromeClient extends WebChromeClient {
    @Override
    public boolean onConsoleMessage(ConsoleMessage msg) {
        Log.d(
            "WebView", 
            String.format("%s %s:%d", msg.message(), msg.lineNumber(), msg.sourceId())
        );
        return true;
    }
}

Och ange det i din aktivitet eller fragment:

webView.setWebChromeClient(new ChromeClient());

Så den här exempelsidan:

<html>
<head>
    <script type="text/javascript">
        console.log('test message');
    </script>
</head>
<body>
</body>
</html>

kommer att skriva logg "testmeddelande" till logcat:

WebView: testmeddelande sample.html: 4

console.info() , console.warn() och console.error() stöds också av chrome-client.

Fjärrfelsökning android enheter med Chrome

Din kan fjärrfelsöka webbvy baserad applikation från din stationära Chrome.

Aktivera USB-felsökning på din Android-enhet

Öppna Inställningar på din Android-enhet, hitta avsnittet för utvecklaralternativ och aktivera USB-felsökning.

Anslut och upptäck din Android-enhet

Öppna sidan i krom följande sida: krom: // inspektera / # enheter

Välj din enhet i dialogrutan Kontrollera enheter och tryck på inspektera . En ny instans av Chrome's DevTools öppnar din utvecklingsmaskin.

Mer detaljerad riktlinje och beskrivning av DevTools finns på utvecklare.google.com

Öppna lokal fil / Skapa dynamiskt innehåll i Webview

layout.xml

                <WebView
                android:id="@+id/WebViewToDisplay"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_gravity="center"
                android:fadeScrollbars="false" />

Ladda data i WebViewToDisplay

        WebView webViewDisplay;
        StringBuffer LoadWEb1;

        webViewDisplay = (WebView) findViewById(R.id.WebViewToDisplay);
        LoadWEb1 = new StringBuffer();
        LoadWEb1.append("<html><body><h1>My First Heading</h1><p>My first paragraph.</p>");
        //Sample code to read parameters at run time
        String strName = "Test Paragraph";
        LoadWEb1.append("<br/><p>"+strName+"</p>");
        String result = LoadWEb1.append("</body></html>").toString();
                WebSettings webSettings = webViewDisplay.getSettings();
                webSettings.setJavaScriptEnabled(true);
                webViewDisplay.getSettings().setBuiltInZoomControls(true);
                if (android.os.Build.VERSION.SDK_INT >= 11){
                    webViewDisplay.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
                    webViewDisplay.getSettings().setDisplayZoomControls(false);
                }

                webViewDisplay.loadDataWithBaseURL(null, result, "text/html", "utf-8",
                        null);
                //To load local file directly from assets folder use below code
                //webViewDisplay.loadUrl("file:///android_asset/aboutapp.html");