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. npm在项目目录安装插件需要使用sudo

    今天使用node的npm安装插件的时候遇到一个问题,那就是在项目目录里面安装插件的时候,必须使用超级用户(sudo)执行才会安装成功,否则会报如下错误: 以安装 gulp-uglify 为例 $ np ...

  2. NodeJS常用库说明

    underscore:1.合并json async:1.异步编程同步化

  3. Android提供的LruCache类简介

    分类: Android开发 2013-02-06 15:26 26733人阅读 评论(10) 收藏 举报 package android.util; import import /** * A cac ...

  4. Request.Querystring中文乱码问题解决

    现象:近期项目中用到查询字符串传值,如果传递的是英文一切正常,但是传递中文时,使用request.querystring[]得到的是乱码. 原因:不知道为什么,可能是编码不一致问题 解决方法1:修改w ...

  5. asp.net 2.0中新增的web.config的默认namespace功能 (转)

    看上去这个题目比较长,但实际上,我在看资料时发现,这就是说,在asp.net 2.0中,只需要在web.config里定义你要用的那些namespace,则在aspx页面中就不需要再象1.1那样,用 ...

  6. 在Windows下编译ffmpeg完全手册

    本文的内容几乎全部来自于FFmpeg on Windows,但是由于国内的网络封锁,很难访问这个域名下的内容,因此我一方面按照我自己的理解和实践做了翻译,另一方面也是为了能提供一个方便的参考方法. 注 ...

  7. 如何在Android开发中让你的代码更有效率

    最近看了Google IO 2012年的一个视频,名字叫做Doing More With Less: Being a Good Android Citizen,主要是讲如何用少少的几句代码来改善And ...

  8. JAVA数据库处理(连接,数据查询,结果集返回)

    package john import java.io.IOException; import java.util.*; public class QueryDataRow { public Hash ...

  9. JS触发ASP.NET服务器端控件的方法

    <asp:Button ID="Button_regId" runat="server" Font-Bold="False" OnCl ...

  10. POJ 1519 Digital Roots

    题意:求数根. 解法:一个数的数根就是mod9的值,0换成9,只是没想到给的是一个大数……只好先把每位都加起来再mod9…… 代码: #include<stdio.h> #include& ...