javascript - JS および CSS リソースをプログラムで追加する方法

Question

プログラムで JavaScript および CSS リソースを<h:head>JSF ページに追加する必要があります。これを達成する方法は明確ではありません。どうすればそれを行うことができますか、またはキックオフの例はありますか?

Answer 1

それは、リソースを宣言する正確な場所によって異なります。通常、それらをプログラムで宣言する唯一の理由は、これらの JS および/または CSS リソースを必要とする HTML コードをカスタムUIComponentまたはRenderer生成することです。@ResourceDependencyこれらはorによって宣言され@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()UIOutputjavax.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);
}