From 527888d20bdf9752fc91ad1ce87c616d0fbc300f Mon Sep 17 00:00:00 2001 From: Abhishek Kumar Singh Date: Tue, 10 Dec 2024 23:12:12 +0530 Subject: [PATCH] Added demo page for app content height updates --- .../app-content-height-updates/host-page.html | 102 ++++++++++++ .../app-content-height-updates/index.html | 156 ++++++++++++++++++ 2 files changed, 258 insertions(+) create mode 100644 demo-pages/app-content-height-updates/host-page.html create mode 100644 demo-pages/app-content-height-updates/index.html diff --git a/demo-pages/app-content-height-updates/host-page.html b/demo-pages/app-content-height-updates/host-page.html new file mode 100644 index 0000000..0fb874d --- /dev/null +++ b/demo-pages/app-content-height-updates/host-page.html @@ -0,0 +1,102 @@ + + + + + + Demo Page with Header and Footer + + + + + + +
+
+

My website

+
+
+ + +
+ +
+ + + + + + + + + + diff --git a/demo-pages/app-content-height-updates/index.html b/demo-pages/app-content-height-updates/index.html new file mode 100644 index 0000000..e6276e5 --- /dev/null +++ b/demo-pages/app-content-height-updates/index.html @@ -0,0 +1,156 @@ + + + + + + Demo Page with Device Frame + + + + + + + +
+
+
+ +
+ +
+
+ +
+ +
Instructions:
+
    +
  • This page embeds a mobile app inside a device frame.
    • +
  • The iframe dynamically loads content and displays it inside the device frame.
    • +
  • The mobile app content adjusts its height based on its content to prevent scrollbars.
    • +
  • You can use the buttons inside the iframe to interact with the app and modify content.
    • +
  • All content is displayed responsively for mobile viewing.
    • +
+ +
+
How to implement this?
+ +

1. HTML Changes - Append target query param with your website's + origin to the public app URL

+
+ 
+              <iframe src="https://cloud.uipath.com/...?el=VB&target=https://mywebsite.com" id="appIframe"></iframe>
+
+
+ +

2. Script to embed on your webpage that can subscribe to App Height changes and resize the iframe.

+
+ 

+  window.addEventListener('message', function(event) {
+    if (event.origin !== "https://yourapp.com") return;
+    if (event.data && event.data.type === "resize") {
+      var iframe = document.getElementById("webAppIframe");
+      iframe.style.height = event.data.height + 'px';
+    }
+  });
+  function sendResizeMessage() {
+    var iframe = document.getElementById("webAppIframe");
+    var iframeHeight = iframe.contentWindow.document.body.scrollHeight;
+    parent.postMessage({ type: "resize", height: iframeHeight }, "*");
+  }
+  window.onload = function() {
+    var iframe = document.getElementById("webAppIframe");
+    iframe.onload = sendResizeMessage;
+  };
+
+
+
+
+
+
+ + + + + + +