javascript - 如何以编程方式将 JS 和 CSS 资源添加到

Question

我需要以编程方式将 JavaScript 和 CSS 资源添加到<h:head>JSF 页面。目前尚不清楚如何实现这一目标。我该怎么做或者有一个启动示例？

Answer 1

这取决于您要在哪里声明资源。通常，以编程方式声明它们的唯一原因是您有自定义UIComponent或Renderer生成 HTML 代码，而这些代码又需要这些 JS 和/或 CSS 资源。然后它们将由@ResourceDependencyor声明@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(). 组件资源必须创建为具有orUIOutput的渲染器类型，以分别表示完全值得的or 。和属性可以只放在属性映射中。javax.faces.resource.Scriptjavax.faces.resource.Stylesheet<h:outputScript><h:outputStylesheet>libraryname

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);
}