如何在qooxdoo中动态加载CSS文件

问题描述

是否有一个特殊的 qooxdoo 类可以像 qx.util.DynamicScriptLoader 对 JavaScript 文件那样动态加载 CSS 文件？

例如，取决于用户选择他想要使用的地理地图，应用程序加载特定的 JavaScript 和 CSS 文件。我可以通过 .js 类获取 qx.util.DynamicScriptLoader 文件，但对于 css，我使用 externalResources 文件中的 Manifest.json 部分，该部分始终加载样式文件（对吗？）。

解决方法

包含 css 文件的动态可能性，例如在类的构造函数中，使用 qx.bom.Stylesheet.includeFile 如下：

qx.bom.Stylesheet.includeFile("https://myserver.com/my.css");

通过这种方式，我成功地为包/框架构建了完全动态的包装器，其中所有外部资源仅在与 qx.util.DynamicScriptLoader 结合的包装器类实例化时加载。

如果 css 文件在您的项目资源中，您必须对资源名称调用 qx.util.ResourceManager.getInstance().toUri()，然后将其提供给 qx.bom.Stylesheet.includeFile。

假设您的项目中有一个位于 resource/myframework/my.css 的 css 文件，您必须首先在包装类中创建一个 @asset 提示：

/*
 * @asset(myframework/my.css)
 */

之后，例如在您调用的构造函数中：

  qx.bom.Stylesheet.includeFile(qx.util.ResourceManager.getInstance().toUri(
    "resource/myframework/my.css"
  ));

为了避免css文件的多次加载，我在包装类中添加了一个静态类成员CSS_INCLUDED，初始化为false，然后在调用qx.bom.Stylesheet.includeFile后设置为true，结果是这段代码：

  if(my.wrapper.CSS_INCLUDED === false) {
    qx.bom.Stylesheet.includeFile(qx.util.ResourceManager.getInstance().toUri(
      "resource/myframework/my.css"
    ));
    my.wrapper.CSS_INCLUDED = true;
  }

这样后续的实例化就不会再次加载 css 文件。

dynamic-script-loading qooxdoo