vSphere Web 客户端的自定义插件中的 AngularJS UI 渲染问题

Posted 2023-03-17

【中文标题】vSphere Web 客户端的自定义插件中的 AngularJS UI 渲染问题

【英文标题】：AngularJS UI Rendering issue in custom plugin of vSphere web client

【发布时间】：2017-11-03 21:28:51

【问题描述】：

我们正在借助 vSphere 客户端 SDK 6.0 为 vmware 的 vSphere Web 客户端开发用户自定义。

我们已经使用 html-bridge (AngularJS) 为插件开发了一个 UI，我们正面临一个特定场景的 UI 渲染问题。

图 1： 此窗口属于 vCenter。如果我选择任何下拉菜单，它不会影响屏幕的其余部分。

图 2： 我们在 AngularJS 中借助 html-bridge 创建了这个窗口。

图 3： 如果我正在处理我们的自定义窗口并选择任何不属于我们的自定义窗口的 drop own （它们属于 vCenter 的组件，我用箭头）。然后我们窗口的所有内容都会消失。

我们可以避免这个问题吗？

请指教。

【参考方案1】：

这是 Flash 播放器如何显示 HTML 内容的固有问题。您在插件视图中显示的 HTML 内容嵌套在 IFrame 中，该 IFrame 本质上是在其中绘制内容的本机 OS 窗口。 Web 客户端的 Flash 内容在一个单独的本地窗口中绘制，该窗口的 z-index 低于 IFrame 窗口。 由于 Flash 弹出窗口（例如屏幕截图中的菜单）不是在其专用窗口中而是在 Flash 播放器的窗口中绘制的，因此它不能浮动在 IFrame 窗口（您的内容）的顶部。因此，如果 IFrame 未隐藏，您将“看到”插件视图后面的下拉菜单。

此限制没有适当的解决方法。

【讨论】：

感谢 Tony 的宝贵指导。