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 :
jsf2-outputScript-example

JSF file

``

	<h1>JSF 2 outputScript example</h1>
	
	<h:outputScript library="js" name="common.js" />
	
</h:body>
``` It will generate following HTML output ``` <head></head> 
 <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>
posted @ 2015-08-28 07:33  wuhn  阅读(238)  评论(0)  编辑  收藏  举报