响应迅速且适合移动设备的嵌入式应用程序

您可以向外部网页添加逻辑，使嵌入式应用程序响应屏幕尺寸的变化。 如果您使用小屏幕设备（例如手机），这可能非常有用，因为它使您无需多次滚动即可查看嵌入式应用程序内容。

如果您不将此逻辑添加到网页中，则嵌入将保持静态高度并显示滚动条。

设计响应迅速且适合移动设备的嵌入式应用程序

1. 通过向现有嵌入或 iFrame 添加其他参数来将与外部域的通信列入白名单：&target=https://mywebsite.com。 以下代码显示了一个示例：

   <embed title="Embedded app" src="<PUBLIC-APP-URL>?el=VB&target=https://mywebsite.com">
   

2. 要使嵌入件知道大小更新，请将以下 JavaScript 逻辑添加到托管嵌入式应用程序的网页中：
   备注：

   具体值因应用程序的设计而异。

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

该脚本执行以下操作：

• 当向应用程序添加控件或从应用程序中删除控件时，脚本将触发 APP_CONTENT_HEIGHT_UPDATED 事件，并更新 embed 变量的高度。
  • APP_CONTENT_HEIGHT_UPDATED 事件将触发 APP_CONTENT_RESIZED，从而使 embed 变量的高度减少 10 个像素。
    • APP_CONTENT_RESIZED 事件触发另一个 APP_CONTENT_RESIZED 事件，该事件再次将 embed 变量的高度减少 10 个像素。

该脚本会重复这些操作，直到：

• embed 变量处于不需要滚动条即可查看应用程序的最小高度。
• embed 变量将简化为由 MIN_HEIGHT 指定的初始值。

演示

响应迅速且适合移动设备的嵌入式应用程序

简介

此网页在设备框架中嵌入了一个移动应用程序。 该应用程序以响应式方式显示适合移动使用的内容。 iFrame 会动态加载内容，并将其显示在设备框架中。 应用程序内容会根据其内容调整其高度，以防止出现滚动条。

演示版嵌入式应用程序 - 自行试用

使用 iFrame 中的按钮与应用程序交互并修改内容。

使用 GitHub 上的演示应用程序