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. MTK6577+Android4.04编译

    MTK6577+Android4.04编译 编译命令 ./mk new 出错信息如下: **********checkingEnv************ Your building environm ...

  2. JS中字符串拼装 单双引号的处理 字符转义

    js中可能会用到动态追加元素,可能数据也是从后台传过来的,当然有两种思路, 1.在后台拼装好直接返回; 2.在前台js里面拼装, 如果拼装大量的html时可能单双引号就容易出问题;那么如何解决呢?最近 ...

  3. mysql备份恢复数据库据/表

    备份单个数据库,只备份表,如要恢复,必须先创建一个数据库[root@s]# mysqldump -u root -p dbname1 > dbname1.sql[root@s]# mysql - ...

  4. WEBBROWSER中模拟鼠标点击(SendMessage/PostMessage)

    好久没有写文章,发一篇顶顶博客访问量.别人建议转一些比较好的代码也贴过来,但是我打算这里主要发自己原创的代码,所以么..流量该多少就多少吧... 回到主题,在webbrowser中点击某链接网上几乎都 ...

  5. Android之ScaleGestureDetector（缩放手势检测）

    一.概述 ScaleGestureDetector这个类是专门用来检测两个手指在屏幕上做缩放的手势用的,最简单的应用就是用来缩放图片或者缩放网页. 二.要求 利用ScaleGestureDetecto ...

  6. POJ 3233 矩阵乘法

    题意:求解A+A^2+...+A^k 题解: 1)利用通和公式,原式=(A^k+1 - A)(A - O)^-1 时间复杂度O(n^3lgk) 2)递归求解,A+A^2+...+A^k=(A+A^2+ ...

  7. 宏ut_2pow_round

    计算 m的整数倍 不大于n #define ut_2pow_round(n, m) ((n) & ~((m) - 1)) #include <stdio.h>#include &l ...

  8. MetadataType的使用，MVC的Model层数据验证

    MetadataType的使用,MVC的Model层数据验证 指定要与数据模型类关联的元数据类   using System.ComponentModel.DataAnnotations; //指定要 ...

  9. fancybox 在打开窗口前 先执行 js脚本,fancybox设置只能通过右上角关闭,fancybox遮罩层关闭

    在默认情况下,fancybox点击之后弹出窗口,右上角带有一个XX,但是点击窗口的其他遮罩层或者是其他地方,都是可以关闭fancybox的,有些时候,我们不希望这样关闭,而是只能点击右上角关闭,那么设 ...

  10. HelloX操作系统与中国移动OneNET物联网平台成功完成对接

    HelloX成功与中国移动物联网平台对接 经过HelloX项目组同仁的努力,尤其是Tywin(@飓风)的努力下,HelloX最新版本V1.78已成功与中国移动OneNET(open.iot.10086 ...