Android
WebView
Recherche…
Introduction
WebView est une vue qui affiche des pages Web dans votre application. De cette manière, vous pouvez ajouter votre propre URL.
Remarques
S'il vous plaît n'oubliez pas d'ajouter la permission dans votre fichier manifeste Android
<uses-permission android:name="android.permission.INTERNET" />
Dialogues d'alerte JavaScript dans WebView - Comment les faire fonctionner
Par défaut, WebView n'implémente pas les boîtes de dialogue d'alerte JavaScript, c.-à-d. alert()
ne fera rien. Pour que vous deviez activer JavaScript (évidemment ..), puis définir un WebChromeClient
pour gérer les demandes de boîtes de dialogue d'alerte à partir de la page:
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);
}
});
Ici, nous onJsAlert
, puis nous appelons la super implémentation, ce qui nous donne une boîte de dialogue Android standard. Vous pouvez également utiliser le message et l'URL vous-même, par exemple si vous souhaitez créer une boîte de dialogue personnalisée ou si vous souhaitez les enregistrer.
Communication de Javascript vers Java (Android)
Activité Android
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
}
}
Page Web, appel Javascript
<script>
...
Android.jsCallback();
...
Android.jsCallback('hello test');
...
</script>
Conseil supplémentaire
En passant dans une structure de données complexe, une solution possible est d'utiliser JSON.
Android.jsCallback('{ "fake-var" : "fake-value", "fake-array" : [0,1,2] }');
Du côté Android, utilisez votre analyseur JSON préféré, à savoir: JSONObject
Communication de Java à Javascript
Exemple de base
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!')");
}
}
Ouvrir un exemple de numéroteur
Si la page Web contient un numéro de téléphone, vous pouvez passer un appel à l'aide du composeur de votre téléphone. Ce code vérifie l'URL qui commence par tel: alors faites une intention d'ouvrir le composeur et vous pouvez appeler le numéro de téléphone cliqué:
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;
}
Dépannage de WebView en imprimant des messages de console ou par le débogage à distance
Impression des messages de la console Webview dans logcat
Pour gérer console
messages de console
à partir de la page Web, vous pouvez remplacer onConsoleMessage
dans 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;
}
}
Et définissez-le dans votre activité ou fragment:
webView.setWebChromeClient(new ChromeClient());
Donc, cet exemple de page:
<html>
<head>
<script type="text/javascript">
console.log('test message');
</script>
</head>
<body>
</body>
</html>
écrira log 'test message' à logcat:
WebView: exemple de message de test.html: 4
console.info()
, console.warn()
et console.error()
sont également supportés par chrome-client.
Débogage à distance des appareils Android avec Chrome
Vous pouvez déboguer une application basée sur Webview à partir de Google Chrome.
Activer le débogage USB sur votre appareil Android
Sur votre appareil Android, ouvrez Paramètres, recherchez la section Options de développeur et activez le débogage USB.
Connectez et découvrez votre appareil Android
Ouvrir la page en chrome Page suivante: chrome: // inspect / # devices
Dans la boîte de dialogue Inspecter les périphériques, sélectionnez votre appareil et appuyez sur inspecter . Une nouvelle instance de Chrome DevTools s'ouvre sur votre machine de développement.
Des instructions et une description plus détaillées de DevTools sont disponibles sur developers.google.com.
Ouvrir un fichier local / Créer un contenu dynamique dans 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" />
Charger des données dans 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");