Android
WebView

Invoering

Opmerkingen

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

JavaScript-waarschuwingsdialogen in WebView - Hoe ze te laten werken

Standaard implementeert WebView geen JavaScript-waarschuwingsdialogen, dwz. alert() doet niets. Om dit te doen moet u eerst JavaScript inschakelen (uiteraard ..) en vervolgens een WebChromeClient om verzoeken om waarschuwingsdialogen vanaf de pagina WebChromeClient te handelen:

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);
    }
});

Hier negeren we onJsAlert en dan bellen we door naar de onJsAlert , die ons een standaard Android-dialoogvenster geeft. U kunt het bericht en de URL ook zelf gebruiken, bijvoorbeeld als u een dialoogvenster met aangepaste stijl wilt maken of als u ze wilt loggen.

Communicatie van Javascript naar Java (Android)

Android-activiteit

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
    }
}

Webpagina, Javascript-oproep

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

Extra tip

Het gebruik van JSON is een oplossing die een complexe gegevensstructuur doorgeeft.

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

Aan de Android-kant gebruikt u uw favoriete JSON-parser, namelijk: JSONObject

Communicatie van Java naar Javascript

Basis voorbeeld

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!')");
   }
}

Voorbeeld kiezer openen

Als de webpagina a een telefoonnummer bevat, kunt u bellen met de kiezer van uw telefoon. Deze code controleert de URL die begint met Tel: maak vervolgens een intentie om de kiezer te openen en u kunt bellen naar het aangeklikte telefoonnummer:

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;
}

Problemen met WebView oplossen door console-berichten af te drukken of door foutopsporing op afstand op te lossen

Webview-consoleberichten afdrukken naar logcat

Om console van webpagina's af te handelen, kunt u onConsoleMessage in WebChromeClient overschrijven:

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;
    }
}

En zet het in je activiteit of fragment:

webView.setWebChromeClient(new ChromeClient());

Dus deze voorbeeldpagina:

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

schrijft log 'testbericht' naar logcat:

WebView: testbericht sample.html: 4

console.info() , console.warn() en console.error() worden ook ondersteund door chrome-client.

Android-apparaten voor foutopsporing op afstand met Chrome

U kunt op afstand webgebaseerde applicaties debuggen vanaf uw desktop Chrome.

Schakel USB-foutopsporing in op uw Android-apparaat

Open op uw Android-apparaat Instellingen, zoek het gedeelte Opties voor ontwikkelaars en schakel USB-foutopsporing in.

Maak verbinding en ontdek uw Android-apparaat

Open pagina in chrome volgende pagina: chrome: // inspect / # devices

Selecteer uw apparaat in het dialoogvenster Apparaten inspecteren en druk op inspecteren . Een nieuw exemplaar van DevTools van Chrome wordt geopend op uw ontwikkelmachine.

Meer gedetailleerde richtlijnen en een beschrijving van DevTools zijn te vinden op developers.google.com

Open Local File / Creëer dynamische inhoud in 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" />

Laad gegevens in 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");