Question

我需要以编程方式将JS和CSS资源添加到JSF页面的<h:head>。目前尚不清楚如何实现这一目标。有人可以给出提示或启动示例吗？

Answer 1

这取决于您确切地声明资源的位置。通常，以编程方式声明它们的唯一原因是您有自定义UIComponent或Renderer，它会生成HTML代码，而HTML代码又需要这些JS和/或CSS资源。然后由@ResourceDependency或@ResourceDependencies声明它们。

@ResourceDependency(library="mylibrary", name="foo.css")
public class FooComponentWithCSS extends UIComponentBase {
    // ...
}

@ResourceDependencies({
    @ResourceDependency(library="mylibrary", name="bar.css"),
    @ResourceDependency(library="mylibrary", name="bar.js")
})
public class BarComponentWithCSSandJS extends UIComponentBase {
    // ...
}

但是如果你真的需要在其他地方声明它们，比如在呈现响应之前调用的支持bean方法（否则它太迟了），那么你可以通过UIViewRoot#addComponentResource()来做到这一点。必须将组件资源创建为UIOutput，其呈现器类型为javax.faces.resource.Script或javax.faces.resource.Stylesheet，以分别表示完整的<h:outputScript>或<h:outputStylesheet>。 library和name属性只能放在属性映射中。

UIOutput css = new UIOutput(); css.setRendererType("javax.faces.resource.Stylesheet"); css.getAttributes().put("library", "mylibrary"); css.getAttributes().put("name", "bar.css"); UIOutput js = new UIOutput(); js.setRendererType("javax.faces.resource.Script"); js.getAttributes().put("library", "mylibrary"); js.getAttributes().put("name", "bar.js"); FacesContext context = FacesContext.getCurrentInstance(); context.getViewRoot().addComponentResource(context, css, "head"); context.getViewRoot().addComponentResource(context, js, "head");

Answer 2

您可以将脚本和样式资源添加到这样的页面：

var head = document.getElementsByTagName("head")[0];
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "xxxx.js";
head.appendChild(s);

s = document.createElement("style");
s.type = "text/css"
s.src = "yyy.css";
head.appendChild(s);

或者，以函数形式：

function addScript(path) {
    var head = document.getElementsByTagName("head")[0];
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = path;
    head.appendChild(s);
}

function addCSSFile(path) {
    var head = document.getElementsByTagName("head")[0];
    var s = document.createElement("style");
    s.type = "text/css";
    s.src = path;
    head.appendChild(s);
}

如何以编程方式将JS和CSS资源添加到<h：head>？</h：head>

2 个答案: