Android WebView-Benutzerhandbuch Enhanced Edition

Tutorial zur Einführung, zu den Vorteilen und zur Verwendung von Android WebView

WebView ist ein sehr wichtiges Steuerelement in der Android-Plattform, mit dem Webseiten in Android-Anwendungen angezeigt werden können. WebView verwendet die WebKit-Engine zum Rendern von Webseiten und ist daher gut mit Webstandards kompatibel.

Einführung in WebView

WebView ist ein Android-Steuerelement, mit dem Webseiten in Android-Anwendungen angezeigt werden können. WebView verwendet die WebKit-Engine zum Rendern von Webseiten und ist daher gut mit Webstandards kompatibel.

Die Verwendung von WebView ist sehr einfach. Sie müssen lediglich das WebView-Steuerelement zur Layoutdatei hinzufügen und dann die Methode loadUrl () von WebView aufrufen, um die Webseite zu laden.

WebView-Funktion

• Webseiteninhalte anzeigen: WebView kann Inhalte wie HTML, CSS und JavaScript anzeigen und somit zum Anzeigen von Websites, Nachrichten, Artikeln usw. verwendet werden. Webseiteninhalte können dynamisch geladen werden.
• Mit Webseiten interagieren: WebView kann mit Webseiten interagieren, z. B. durch Klicken auf Links, Eingeben von Text usw.
• WebView anpassen: WebView kann Erscheinungsbild und Verhalten anpassen, z. B. Hintergrundfarbe, Schriftgröße usw. festlegen.

Vorteile von WebView

• Plattformübergreifend: WebView verwendet die WebKit-Engine und kann daher plattformübergreifend verwendet werden.
• Dynamische Aktualisierung: WebView kann Webseiteninhalte dynamisch aktualisieren und so zur Anzeige der neuesten Informationen verwendet werden.
• Sicherheit: WebView verwendet einen Sandbox-Mechanismus und kann so verhindern, dass bösartige Webseiten auf die Anwendung zugreifen.

Tutorial zur Verwendung von WebView

WebView erstellen

Um eine WebView zu erstellen, fügen Sie einfach das WebView-Steuerelement zur Layoutdatei hinzu:

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

Webseite laden

Um eine Webseite zu laden, rufen Sie einfach die Methode „loadUrl()“ von WebView auf:

webView.loadUrl("https://www.baidu.com");

Interagieren Sie mit JavaScript

WebView kann mit JavaScript interagieren, was einige sehr interessante Funktionen ermöglicht.

Um mit JavaScript zu interagieren, müssen Sie lediglich die Schnittstellen WebViewClient und WebChromeClient implementieren.

Die WebViewClient-Schnittstelle wird verwendet, um Ereignisse zu verarbeiten, wenn WebView eine Webseite lädt, z. B. den Abschluss des Ladens der Webseite, einen Fehler beim Laden der Webseite usw.

Die WebChromeClient-Schnittstelle wird verwendet, um Ereignisse zu verarbeiten, die mit JavaScript interagieren, wenn WebView eine Webseite lädt, z. B. das Öffnen eines Warnfelds auf einer Webseite, das Öffnen eines Dialogfelds auf einer Webseite usw.

gemeinsame Attribute

WebView hat die folgenden gemeinsamen Eigenschaften:

• android:layout_width : die Breite des WebView
• android:layout_height : die Höhe des WebView
• android:layout_gravity : die Layoutmethode von WebView
• android:background : die Hintergrundfarbe des WebView
• android:layerType : WebView-Ebenentyp
• android:overScrollMode : die Scroll-Methode von WebView
• android:scrollbars : Ob WebView Bildlaufleisten anzeigt
• android:scrollBarStyle : der Stil der WebView-Bildlaufleiste
• android:webViewClient : der Client von WebView
• android:webChromeClient : Chrome-Client für WebView

Es gibt viele Parameter, die Android WebView festlegen kann. Im Folgenden sind einige häufig verwendete Parameter und ihre Bedeutung aufgeführt:

• android:layout_width : Wird verwendet, um die Breite von WebView festzulegen

• android:layout_height : Wird verwendet, um die Höhe von WebView festzulegen

• android:layout_gravity : Wird verwendet, um das Layout von WebView im Layout festzulegen

• android:background : Wird verwendet, um die Hintergrundfarbe von WebView festzulegen

• android:layerType : Wird verwendet, um den Ebenentyp von WebView festzulegen

• android:overScrollMode : Wird verwendet, um den Bildlaufmodus von WebView festzulegen

• android:scrollbars : Wird verwendet, um festzulegen, ob WebView Bildlaufleisten anzeigt

• android:scrollBarStyle : Wird verwendet, um den Stil der WebView-Bildlaufleiste festzulegen

• android:webViewClient : Wird verwendet, um den Client von WebView festzulegen. WebViewClient ist die Rückrufschnittstelle von WebView, die zur Verarbeitung von Ereignissen verwendet wird, wenn WebView Webseiten lädt, z. B. Abschluss des Ladens einer Webseite, Fehler beim Laden einer Webseite usw.

• android:webChromeClient : Chrome-Client zum Festlegen von WebView. WebChromeClient ist die Rückrufschnittstelle von WebView, die zum Verarbeiten von Ereignissen verwendet wird, die WebView beim Laden von Webseiten mit JavaScript interagiert, z. B. Popup-Warnfelder auf Webseiten, Popup-Dialogfelder auf Webseiten usw.

Zusätzlich zu diesen allgemeinen Eigenschaften kann WebView auch andere Eigenschaften festlegen, wie zum Beispiel:

• android:allowFileAccess : Ob WebView den Zugriff auf das Dateisystem zulassen soll
• android:allowContentAccess : Ob WebView den Zugriff auf den Inhaltsanbieter zulassen soll
• android:allowFileAccessFromFileURLs : Ob WebView das Laden von Ressourcen aus Datei-URLs zulassen soll
• android:allowUniversalAccessFromFileURLs : Ob WebView das Laden von Ressourcen von jeder Datei-URL zulassen soll
• android:cacheMode : WebView-Cache-Modus
• android:databaseEnabled : Ob die Datenbankfunktion von WebView aktiviert werden soll
• android:domStorageEnabled : Ob die DOM-Speicherfunktion von WebView aktiviert werden soll
• android:geolocationEnabled : Ob die geografische Standortfunktion von WebView aktiviert werden soll
• android:hardwareAccelerated : Ob Hardwarebeschleunigung verwendet werden soll
• android:initialScale : die anfängliche Zoomstufe des WebView
• android:loadWithOverviewMode : Ob der Vollbildmodus verwendet werden soll, wenn WebView eine Webseite lädt
• android:mediaPlaybackRequiresUserGesture : Ob Benutzergesten erforderlich sind, wenn WebView Audio oder Video abspielt
• android:mixedContentMode : Der Modus von WebView beim Laden gemischter Inhalte (d. h. mit http- und https-Ressourcen)
• android:pluginState : Plugin-Status von WebView
• android:saveFormData : ob Formulardaten gespeichert werden sollen
• android:savePassword : ob das Passwort gespeichert werden soll
• android:selectAllOnFocus : Ob der gesamte Text ausgewählt werden soll, wenn WebView den Fokus erhält
• android:useWideViewPort : Gibt an, ob der Breitansichtsmodus verwendet werden soll, wenn WebView Webseiten lädt
• android:userAgent : Die Benutzeragentenzeichenfolge von WebView

Diese Eigenschaften können verwendet werden, um das Verhalten und Erscheinungsbild des WebView zu konfigurieren.

Gängige Methode

WebView verfügt über die folgenden gängigen Methoden:

• loadUrl() : Eine Webseite laden
• reload() : Die Webseite neu laden
• canGoBack() : ob es möglich ist, zur vorherigen Seite zurückzukehren
• goBack() : Zurück zur vorherigen Seite
• canGoForward() : Ob es möglich ist, zur nächsten Seite zu gelangen
• goForward() : Weiter zur nächsten Seite
• evaluierenJavascript() : JavaScript-Code ausführen
• addJavascriptInterface() : Java-Objekte für JavaScript verfügbar machen

WebView und native Interaktion

Android WebView und Native können auf zwei Arten interagieren:

• über JavaScript
• Über WebViewClient und WebChromeClient

1. Über JavaScript

Über JavaScript kann WebView mit Native interagieren. JavaScript-Code kann nativ über die Methode „evalueJavascript()“ von WebView ausgeführt werden, oder Java-Objekte können über die Methode „addJavascriptInterface()“ von WebView für JavaScript verfügbar gemacht werden.

Hier ist Beispielcode für die Interaktion über JavaScript:

// 在Java代码中，将一个Java对象暴露给JavaScript
WebView webView = findViewById(R.id.webView);
webView.addJavascriptInterface(new MyJavaScriptInterface(), "myObject");

// 在JavaScript代码中，调用Java对象的方法
var myObject = window.myObject;
myObject.showToast("Hello, world!");

2. Über WebViewClient und WebChromeClient

Über WebViewClient und WebChromeClient kann WebView JavaScript-Ereignisse verarbeiten, z. B. den Abschluss des Ladens einer Webseite, einen Fehler beim Laden der Webseite, ein Popup-Dialogfeld der Webseite usw.

Im Folgenden finden Sie einen Beispielcode für die Interaktion mit WebChromeClient über WebViewClient:

// 实现WebViewClient接口，处理网页加载完成事件
class MyWebViewClient extends WebViewClient {
    
    
    @Override
    public void onPageFinished(WebView view, String url) {
    
    
        // 网页加载完成后，执行操作
    }
}

// 实现WebChromeClient接口，处理网页弹出对话框事件
class MyWebChromeClient extends WebChromeClient {
    
    
    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
    
    
        // 处理网页弹出警告框事件
        return true;
    }
}

// 将WebViewClient和WebChromeClient设置给WebView
WebView webView = findViewById(R.id.webView);
webView.setWebViewClient(new MyWebViewClient());
webView.setWebChromeClient(new MyWebChromeClient());

WebView- und native Beispiele

In Android können Sie über WebView mit nativem Code interagieren, sodass Webseiten Daten mit Android-Anwendungen austauschen und native Funktionen aufrufen können. Im Folgenden finden Sie einen einfachen Beispielcode, der zeigt, wie nativer Code in WebView aufgerufen und Ergebnisse aus nativem Code zurückgegeben werden:

Zuerst erstellen wir eine JavaScript-Schnittstellenklasse im nativen Android-Code für die Interaktion mit WebView:

import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.Toast;

public class JavaScriptInterface {
    
    
    private WebView webView;

    public JavaScriptInterface(WebView webView) {
    
    
        this.webView = webView;
    }

    // 在JavaScript中调用此方法
    @JavascriptInterface
    public void showToast(String message) {
    
    
        Toast.makeText(webView.getContext(), message, Toast.LENGTH_SHORT).show();
    }

    // 在JavaScript中调用此方法，并返回结果给JavaScript
    @JavascriptInterface
    public String getNativeData() {
    
    
        // 在这里执行原生代码逻辑，获取需要返回给JavaScript的数据
        String nativeData = "这是来自原生代码的数据";
        return nativeData;
    }
}

Als Nächstes verknüpfen wir in der Android-Aktivität (oder im Fragment) die WebView mit der JavaScript-Schnittstellenklasse und laden die Webseite:

import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {
    
    

    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = findViewById(R.id.webview);

        // 启用JavaScript
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        // 创建JavaScript接口实例，传入WebView
        JavaScriptInterface jsInterface = new JavaScriptInterface(webView);

        // 将JavaScript接口类与WebView关联
        webView.addJavascriptInterface(jsInterface, "AndroidInterface");

        // 加载Web页面
        webView.loadUrl("file:///android_asset/index.html");
    }
}

Im obigen Code aktivieren wir JavaScript im WebView, erstellen eine JavaScriptInterface-Instanz und verknüpfen sie dann mit dem WebView. Hier habe ich ihm den Namen „AndroidInterface“ gegeben, der in JavaScript verwendet wird.

Jetzt können wir den nativen Code im JavaScript-Code der Webseite aufrufen und das Rückgabeergebnis verarbeiten:

<!DOCTYPE html>
<html>
<head>
    <title>WebView与原生代码交互示例</title>
</head>
<body>
    <h1>WebView与原生代码交互示例</h1>

    <button onclick="showToast()">调用原生代码</button>

    <script>
        function showToast() {
      
      
            // 在JavaScript中调用原生代码
            AndroidInterface.showToast('这是来自WebView的消息');
            
            // 在JavaScript中调用原生代码，并获取返回结果
            var nativeData = AndroidInterface.getNativeData();
            alert(nativeData);
        }
    </script>
</body>
</html>

Im obigen Beispiel haben wir Objekte im JavaScript-Code verwendet, AndroidInterfaceum Methoden im nativen Code aufzurufen. Im Beispiel rufen wir showToastdie Methode auf, um eine native Toast-Nachricht anzuzeigen, und rufen getNativeDatadie Methode auf, um die vom nativen Code zurückgegebenen Daten abzurufen und alertdas Ergebnis anzuzeigen.

Bitte beachten Sie, dass Sie aus Sicherheitsgründen nur die JavaScript-Schnittstelle in der WebView aktivieren, der Sie vertrauen, und die öffentlichen Methoden und Funktionen in der JavaScript-Schnittstellenklasse einschränken.

Das Obige ist ein einfaches Beispiel, das zeigt, wie WebView für die Interaktion mit nativem Code in Android verwendet wird. Sie können diese Beispielcodes entsprechend Ihren spezifischen Anforderungen und Szenarien anpassen und erweitern.

Sicherheit von WebViews

WebView birgt gewisse Sicherheitsrisiken, zum Beispiel kann JavaScript-Code Schadcode ausführen oder Webseiten können Benutzerdaten stehlen. Daher müssen Sie bei der Verwendung von WebView die folgenden Sicherheitsmaßnahmen beachten:

• Laden Sie nur vertrauenswürdige Seiten
• Verwenden Sie die Schnittstellen WebViewClient und WebChromeClient, um JavaScript-Ereignisse zu verarbeiten
• Verwenden Sie einen XSS-Filter, um zu verhindern, dass JavaScript-Code schädlichen Code ausführt
• Verwenden Sie Datenverschlüsselung, um Benutzerdaten zu schützen