How to include JavaScript file in JSF

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的更多相关文章

使用 JavaScript File API 实现文件上传
概述以往对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情.虽然伴随着 Web 2.0 应用技术的不断发展,JavaScript 正在扮演越来越重要的角色,但是出于安全性的考虑,JavaScr ...
ResolveUrl in external JavaScript file in asp.net project
https://stackoverflow.com/questions/11263425/page-resolveurl-is-not-working-in-javascript The proble ...
Inline Workers--Web workers without a separate Javascript file
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...
Minify or format javascript file by web or notepad++
Notepad++ plugin manager install 'JSTOOL' http://tool.oschina.net/codeformat/js https://www.cnblogs. ...
This seems to be a pre-built javascript file. webpack报这个警告怎么办?
增加 module.noParse 进行解决例如: { resolve: { alias: { 'react': 'my/react/path' } }, module: { noParse: [/ ...
dynamic load javascript file.
$.ajax({ url : ("js/public/" + window.localStorage.getItem("lang") + ".js&q ...
Dynamically loading an external JavaScript or CSS file
原文: Dynamically loading an external JavaScript or CSS file 通过javascript动态加载css文件和javascript文件,主要是通 ...
html中#include file的使用方法
有两个文件a.htm和b.htm,在同一文件夹下a.htm内容例如以下  b.htm内容例如以下今天:雨 ...
html 中 #include file 的用法
有两个文件a.htm和b.htm,在同一目录下a.htm内容如下  b.htm内容如下今天:雨 31 ℃- ...

随机推荐

html5 touch事件实现触屏页面上下滑动(二)
五一小长假哪都没去,睡了三天,今天晕晕沉沉的投入工作了,但还是做出了一点点效果上周用html5的touch事件把简单的滑动做出来了,实现了持续页面上下滑动的效果,参考之前的文章及代码html5 t ...
终极解决方案：windows10资源管理器假死
想解决这个问题有以下几点: 1,不要相信所谓的powershell里面输命令可以重装系统自带应用从而解决假死问题! 2,不要相信烂大街的“自启动User Manager”服务可以解决假死问题! 3,不 ...
ASP.NET中POST提交数据并跳转页面
需求:先Post提交数据,然后跳转到目标页面找了好久才发现这个神奇的类HttpHelper.原理很简单,利用html的from表单拼接,然后执行使用方法: NameValueCollection ...
malloc、free的使用
一.malloc()和free()的基本概念以及基本用法: 1.函数原型及说明: void *malloc(long NumBytes):该函数分配了NumBytes个字节,并返回了指向这块内存的指针 ...
从投影的角度理解pca：向量，投影，基，内积，坐标，维数，分散程度，方差，协方差矩阵，对角化，特征值分解，主成分分析PCA
参考:http://blog.csdn.net/songzitea/article/details/18219237
Data Binding（数据绑定）用户指南
1)介绍这篇文章介绍了如何使用Data Binding库来写声明的layouts文件,并且用最少的代码来绑定你的app逻辑和layouts文件. Data Binding库不仅灵活而且广泛兼容- 它 ...
获取某月第一天，最后一天的sql server脚本【转】http://blog.csdn.net/chaoowang/article/details/9167969
这是计算一个月第一天的SQL 脚本: SELECT DATEADD(mm, DATEDIFF(mm,0,getdate()), 0) --当月的第一天 SELECT DATEADD(mm, DA ...
Android-关于android:scrollbarStyle属性
1. activity_maim.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android ...
用defy来潜水最终还是挂了........
defy526是6级,,不过好像这次我用来潜过去不足2米还是挂掉了... 国际通用的防水级别认证体系: IPX-0 没有防水保护 IPX-1 设备在正常操作状态下,可以提供相当于3-5毫米/分钟降雨的 ...
HDU 5875 Function
Function Time Limit: 7000/3500 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others)Total ...