JSFにJavaScriptファイルを含める方法

getdocs

4年前

JSF 2.0では、 `<h:outputScript/>`タグを使ってHTMLの “script”要素をレンダリングし、それをjsファイルにリンクすることができます。

例えば、

<h:outputScript library="js" name="common.js"/>

それは、次のHTML出力を生成します…

<script type="text/javascript"
    src="/JavaServerFaces/faces/javax.faces.resource/common.js?ln=js">
</script>

JSF出力スクリプトの例

<h:outputScript/> 'を使って
`common.js`”をレンダリングする方法を示す例は、下の図を参照してください:

JSFファイル

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      >
    <h:head></h:head>
    <h:body>

        <h1>JSF 2 outputScript example</h1>

        <h:outputScript library="js" name="common.js"/>

    </h:body>
</html>

次のHTML出力を生成します

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

   <head></head>

   <body>

     <h1>JSF 2 outputScript example</h1>

     <script type="text/javascript"
       src="/JavaServerFaces/faces/javax.faces.resource/common.js?ln=js">
     </script>

   </body>
</html>

JSファイルは、JSFの<h:outputScript/>タグが配置されている場所でレンダリングされます。

ターゲット属性

さらに、 “target”属性を使用して、jsファイルの出力先を制御することもできます。

target = “head” – HTMLのheadタグの先頭に表示します.
target = “body” – bodyタグの最後に表示します.
ターゲットなし – タグの配置場所を表示します.

例えば

<h:outputScript library="js" name="common.js" target="body"/>

次のHTML出力を生成します

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

   <head>

   </head>

   <body>
     <h1>JSF 2 outputScript example</h1>

    <script type="text/javascript"
       src="/JavaServerFaces/faces/javax.faces.resource/common.js?ln=js">
    </script>
   </body>

</html>