apps
latest
false
Wichtig :
Bitte beachten Sie, dass dieser Inhalt teilweise mithilfe von maschineller Übersetzung lokalisiert wurde. Es kann 1–2 Wochen dauern, bis die Lokalisierung neu veröffentlichter Inhalte verfügbar ist.
UiPath logo, featuring letters U and I in white

Apps-Benutzerhandbuch

Letzte Aktualisierung 24. März 2025

Reaktionsfähige und für Mobilgeräte optimierte eingebettete Apps

Sie können Ihrer externen Webseite Logik hinzufügen, sodass Ihre eingebettete App auf Änderungen der Bildschirmgröße reagiert. Dies kann nützlich sein, wenn Sie Geräte mit kleinem Bildschirm verwenden, z. B. Mobiltelefone, da Sie so nicht mehrmals scrollen müssen, um den eingebetteten App-Inhalt anzuzeigen.

Wenn Sie diese Logik nicht zu Ihrer Webseite hinzufügen, behält die Einbettung eine statische Höhe bei und zeigt eine Bildlaufleiste an.

Entwerfen von reaktionsfähigen und für Mobilgeräte optimierten eingebetteten Apps

  1. Setzen Sie die Kommunikation mit Ihrer externen Domäne auf die Zulassungsliste, indem Sie Ihrer vorhandenen Einbettung oder Ihrem iFrame einen zusätzlichen Parameter hinzufügen: &target=https://mywebsite.com. Der folgende Code zeigt ein Beispiel:
     <embed title="Embedded app" src="<PUBLIC-APP-URL>?el=VB&target=https://mywebsite.com">
  2. Um Größenaktualisierungen bei Ihrer Einbettung zu berücksichtigen, fügen Sie der Webseite, die die eingebettete App hostet, die folgende JavaScript-Logik hinzu:
    Hinweis:

    Die spezifischen Werte variieren je nach Design Ihrer App.

     <script>  
    const MIN_HEIGHT = 800; // Minimum height of the app  
    var embed = document.querySelector('embed');  window.addEventListener('message', function(event) {  
    if (event.data.event === "APP_CONTENT_HEIGHT_UPDATED" && event.data.height) {  embed.style.height = Math.max(event.data.height, 800);  
    }  
    if (event.data.event === "APP_CONTENT_RESIZED" && event.data.height !== MIN_HEIGHT) {  
    if(event.data.height > 0) {  embed.style.height = Math.max(parseInt(event.data.height) - 10, 850);  
    }  
    }  
    }); 
    </script>

Das Skript führt die folgenden Vorgänge aus:

  • Wenn ein Steuerelement zur App hinzugefügt oder aus ihr entfernt wird, löst das Skript das APP_CONTENT_HEIGHT_UPDATED -Ereignis aus und aktualisiert die Höhe der embed -Variablen.
    • Das Ereignis APP_CONTENT_HEIGHT_UPDATED löst APP_CONTENT_RESIZED aus, wodurch die Höhe der embed -Variable um 10 Pixel reduziert wird.
      • Das APP_CONTENT_RESIZED -Ereignis löst ein weiteres APP_CONTENT_RESIZED -Ereignis aus, wodurch die Höhe der embed -Variable erneut um 10 Pixel reduziert wird.

Das Skript wiederholt diese Vorgänge, bis:

  • Die Variable embed befindet sich auf der Mindesthöhe, auf der eine Bildlaufleiste zum Anzeigen der App nicht erforderlich ist.
  • Die Variable embed wird auf den Anfangswert reduziert, der durch MIN_HEIGHT angegeben wird.

Demo

Reaktionsfähige und für Mobilgeräte optimierte eingebettete App

Einleitung

Auf dieser Webseite wird eine mobile App in einen Geräterahmen eingebettet. Die App zeigt Inhalte für die mobile Nutzung an. Ein iFrame lädt den Inhalt dynamisch und zeigt ihn innerhalb des Geräteframes an. Der App-Inhalt passt seine Höhe basierend auf seinem Inhalt an, um Bildlaufleisten zu vermeiden.

Probieren Sie es selbst aus
Verwenden Sie die Schaltflächen innerhalb des iFrame, um mit der App zu interagieren und den Inhalt zu ändern.

War diese Seite hilfreich?

Hilfe erhalten
RPA lernen – Automatisierungskurse
UiPath Community-Forum
Uipath Logo White