如何删除 GWT 中注入的 CSS 资源？答案

【问题标题】：How to remove the injected CSS Resource in GWT?如何删除 GWT 中注入的 CSS 资源？
【发布时间】：2013-08-17 12:14:01
【问题描述】：

我想在 GWT 应用程序中移除注入的 CSSResource。

我使用了以下代码MyClass.INSTANCE.ensureInjected();

我只想要特定页面的上述 CSSResource。所以剩下的页面应该按照实际的 css/theme 工作。

一旦我注入它，它就适用于整个应用程序。我该如何克服这个问题？

【问题讨论】：

标签： gwt uibinder gwt2 clientbundle cssresource

【解决方案1】：

您可以直接使用 StyleInjector 实用程序类而不是 ensureInjected() 方法注入您的 css 包

然后您将获得注入元素的引用，您可以在需要时将其删除。

// Equivalent to MyClass.INSTANCE.ensureInjected()
StyleElement e  = StyleInjector.injectStylesheet(MyClass.INSTANCE.css().getText());


// Remove the injected css element
e.removeFromParent();

【讨论】：

【解决方案2】：

理论上您可以尝试从 DOM 中移除注入的样式块，但这会非常困难（而且可能不太可靠）。

以不同的方式组织你的“特殊” CSS 样式表会更好：

像这样转动选择器

.some {
  color: green;
}

.other {
  color: red;
}

进入

.special .some {
  color: green;
}

.special .other {
  color: red;
}

然后添加/删除“特殊”类，例如到/从您的 body 元素激活/停用特殊样式。

【讨论】：

我喜欢这个解决方案，可以让皮肤的创建变得非常干净和容易。

【解决方案3】：

如果您在多个页面中嵌入了相同的 GWT 应用程序，并且您希望基于给定页面的不同行为，例如，您可以调用

MyClass.INSTANCE.ensureInjected();

如果设置了引导参数。在主机页面中，设置参数，例如 YourGwtApp.nocahe.js?css=inject 并按照说明阅读它here 在 onLoadMethod 中，根据您的引导参数调用ensureInjected。

【讨论】：

在 AJAX（或 GWT）应用程序中，您通常不会真正加载不同的页面（这会重新构建 DOM），因此注入的 CSS 会保留在页面上。
@ChrisLercher 除非你将它（它 = MyClass.INSTANCE.ensureInjected()）包装在 GWT.runAsynch 块中
一个 runAsync 块只是意味着，该块的 javascript 代码可以稍后加载。但是一旦执行该代码，注入的样式元素就会保留在 DOM 中 - 直到您明确将其删除（参见例如 @Manolo 的答案）。
@ChrisLercher 这是真的。在问题的场景中，对于给定的页面，将调用或根本不调用 runAsync 块。因此，代码将只存在于真正需要的页面的 DOM 中。我同意这对于想要的功能来说不是很干净。恕我直言，它非常适合问题中的给定实现，它本身不是很干净。