切换选项卡时 GXT/GWT html 内容重新加载

Question

我正在从事 GXT/GWT 项目。我有两个选项卡，其中内容是根据下拉菜单中的选择设置的。一个选项卡中的内容是嵌入式视频（Google 视频或 YouTube 视频）。

问题是，切换选项卡时，视频会重新加载并从头开始。我想要的是能够切换选项卡，并在焦点切换到另一个选项卡时让视频继续播放或暂停。

一如既往，任何想法都将受到高度赞赏。

干杯， 本

Answer 1

我同意@mmohab。这是 iFrame 的行为，与 flash 无关。重新加载问题将通过使用 Gxt 的 HtmlContainer 类和 setUrl() 方法来解决，而不是使用 TabItem 或 ContentPanel 的setUrl 方法。
HtmlContainer 将给定的 Html 或 Url 页面主体包装到 Div 标记而不是 iFrame：

HtmlContainer html = new HtmlContainer("www.youtube.com");
yourTabItemObj.add(html);

Answer 2

这是因为您使用 IFRAME 进行嵌入，当 IFRAME 的位置或大小发生变化时，它必须重新加载。这是在 Firefox 中完成的，但是当 IFRAME 的位置或大小发生变化时，IE 不会重新加载 IFRAME。

Answer 3

Google 视频使用 Flash，当您切换到另一个选项卡时，它会从 DOM 中删除，并且当您切换回来时 Flash 必须重新加载。您也许可以为播放器创建一个自定义小部件，重新设置其父级并设置 dom 元素的显示或可见性 CSS 属性。

Answer 4

在 diff 浏览器中存在此问题的 diff 行为。

对于 FF，如果您从一个选项卡切换到另一个选项卡，它将重新加载 Flash 内容。原因是，如果您从一个选项卡切换到另一个选项卡，则取消选择的选项卡“显示”属性将更改为“无”，而当您再次返回该选项卡时，“显示”属性将更改为“阻止”。这就是FF中出现这个问题的根本原因。

在 IE 中你不会遇到这个问题。

解决方案：

.templateTabItem {position: absolute !important;} //css

    TabItem item = new TabItem();
    if (!GXT.isIE && !GXT.isIE8 && !GXT.isIE9) {
        item.setHideMode(HideMode.VISIBILITY);
        item.addStyleName("templateTabItem");
    }