In JSF 2.0, you can use <h:outputScript /> tag to render a HTML “script” element, and link it to a js file.

For example,

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

It will generate following HTML output…

<script type="text/javascript"

  	src="/JavaServerFaces/faces/javax.faces.resource/common.js?ln=js">

</script>

JSF outputScript example

An example to show you how to use <h:outputScript /> to render a “common.js“, see figure below :

JSF file

``

	<h1>JSF 2 outputScript example</h1>

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

</h:body>

```
It will generate following HTML output
```

 <h1>JSF 2 outputScript example</h1>

 <script type="text/javascript"

   src="/JavaServerFaces/faces/javax.faces.resource/common.js?ln=js">

 </script>

```
The JS file will render in where JSF `` tag is placed.
##Target Attribute

In addition, you can use “target” attribute to control where to output the js file.

  • target=”head” – Display within the top of HTML head tag.
  • target=”body” – Display at the end of the body tag.
  • no target – Display at where the tag is placed.

For example

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

It will generate following HTML output

<?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>

How to include JavaScript file in JSF的更多相关文章

  1. 使用 JavaScript File API 实现文件上传

    概述 以往对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情.虽然伴随着 Web 2.0 应用技术的不断发展,JavaScript 正在扮演越来越重要的角色,但是出于安全性的考虑,JavaScr ...

  2. ResolveUrl in external JavaScript file in asp.net project

    https://stackoverflow.com/questions/11263425/page-resolveurl-is-not-working-in-javascript The proble ...

  3. Inline Workers--Web workers without a separate Javascript file

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...

  4. Minify or format javascript file by web or notepad++

    Notepad++ plugin manager install 'JSTOOL' http://tool.oschina.net/codeformat/js https://www.cnblogs. ...

  5. This seems to be a pre-built javascript file. webpack报这个警告怎么办?

    增加 module.noParse 进行解决 例如: { resolve: { alias: { 'react': 'my/react/path' } }, module: { noParse: [/ ...

  6. dynamic load javascript file.

    $.ajax({ url : ("js/public/" + window.localStorage.getItem("lang") + ".js&q ...

  7. Dynamically loading an external JavaScript or CSS file

    原文:   Dynamically loading an external JavaScript or CSS file 通过javascript动态加载css文件和javascript文件,主要是通 ...

  8. html中#include file的使用方法

    有两个文件a.htm和b.htm,在同一文件夹下a.htm内容例如以下 <!-- #include file="b.htm" --> b.htm内容例如以下 今天:雨 ...

  9. html 中 #include file 的用法

    有两个文件a.htm和b.htm,在同一目录下a.htm内容如下 <!-- #include file="b.htm" --> b.htm内容如下 今天:雨 31 ℃- ...

随机推荐

  1. Redis系列文章导读

    1. Redis简介 1.1 Redis VS Memcached 2. Redis安装教程 3. Redis数据类型 4. Redis常用命令 4.1 key 4.2 string 4.3 hash ...

  2. JUnit4概述

    JUnit4是JUnit框架有史以来的最大改进,其主要目标便是利用Java5的Annotation特性简化测试用例的编写. 先简单解释一下什么是Annotation,这个单词一般是翻译成元数据.元数据 ...

  3. uva 111 - History Grading (dp, LCS)

    题目链接 题意:给N,第二行是答案,n个数c1---cn, 代表第一个的顺序是c1,第二个数顺序是c2; 下面每一行是学生的答案,格式同上. 注意:这个给的顺序需要处理一下,不能直接用. 思路:LCS ...

  4. 2014年百度之星程序设计大赛 - 资格赛 1004 Labyrinth（Dp）

    题目链接 题目: Labyrinth Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  5. cf 151 C. Win or Freeze （博弈 求大数质因子）

    题目 题意: 给一个数N,两人轮流操作每次将N变为一个N的非1非自身的因数,第一个无法进行操作的人获胜问先手是否有必胜策略,如果有的话在第二行输出第一步换成哪个数,如果第一步就不能操作则输出0数据规模 ...

  6. bzoj2395

    分组赛时学到的最小乘积生成树模型,感觉这个思路非常神,可以说是数形结合的经典问题 由于生成树有两个权值,我们把每个生成树的权值表示成点坐标(sa,sb) 显然我们知道,乘积最小,那么点必然落在下凸壳上 ...

  7. vssettings 的备份和导入

    vssettings 的作用:   vssettings的导出(也就是相当于是保存):   现在我们试试导入:找一个别人导出的包,我们导入试试.

  8. System.web.optimization 在 Asp.Net WebForm 中应用得注意了

    我们也可以在Asp.Net WebForm项目中去使用Optimization,去处理我们的资源文件,从而起到优化网站性能的效果,前端知识得从小事做起.但是在使用过程中我却发现了下面的问题. 第一步: ...

  9. buildroot linux filesystem 初探

    /****************************************************************************** * buildroot linux fi ...

  10. LeetCode Find Minimum in Rotated Sorted Array 旋转序列找最小值（二分查找）

    题意:有一个有序序列A,其内部可能有部分被旋转了,比如A[1...n]被转成A[mid...n]+A[1...mid-1],如果被旋转,只有这种形式.问最小元素是?(假设没有重复元素) 思路:如果是序 ...