Javascript in JSF - outputScript with no library, no name, and no body content

问题

I want to implement a pacman game in an jsf/primefaces project.

The game can be found here.

Here is my jsf page:

<!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"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
<h:head>
    <title>Screen</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <style type="text/css">
@font-face {
    font-family: 'BDCartoonShoutRegular';
    src: url('BD_Cartoon_Shout-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

#pacman {
    height: 450px;
    width: 342px;
    margin: 20px auto;
}

#shim {
    font-family: BDCartoonShoutRegular;
    position: absolute;
    visibility: hidden
}

h1 {
    font-family: BDCartoonShoutRegular;
    text-align: center;
}

body {
    width: 342px;
    margin: 0px auto;
    font-family: sans-serif;
}

a {
    text-decoration: none;
}
</style>
</h:head>
<h:body>

        <div id="shim">shim for font face</div>

        <h1>HTML5 Pacman</h1>

        <a href="http://arandomurl.com/">Writeup</a> |
  Code on <a href="http://arandomurl.com/">Github</a>

        <div id="pacman"></div>
        <h:outputScript src="../pacman.js"/>
        <h:outputScript src="../modernizr-1.5.min.js"/>

    <script>
    // <![CDATA[
    var el = document.getElementById("pacman");

    if (Modernizr.canvas && Modernizr.localstorage && 
        Modernizr.audio && (Modernizr.audio.ogg || Modernizr.audio.mp3)) {
      window.setTimeout(function () { PACMAN.init(el, "./"); }, 0);
    } else { 
      el.innerHTML = "Sorry, needs a decent browser<br /><small>" + 
        "(firefox 3.6+, Chrome 4+, Opera 10+ and Safari 4+)</small>";
    }
 // ]]>
  </script>


</h:body>
</html>

I get no exceptions in my page. However, when I load the page it looks like that:

as you can see the game does not gets added!

Any idea how to fix that?

UPDATE

when I do:

    <script src="pacman.js"></script>
<script src="modernizr-1.5.min.js"></script>

I also get no output... UPDATE

My folder structure:

回答1:

The <h:outputScript> tag can be used to load script from resources folder only. If you wish to load from other folder outside resources folder, use this code:

<script type="text/javascript" src="#{request.contextPath}/path/to/js"></script>

where request.contextPath is the context path of your site (for example: /pacman). Example: if your js file is in this path: /waitingScreen/audio/pacman.js corresponding code:

<script type="text/javascript" src="#{request.contextPath}/waitingScreen/audio/pacman.js"></script>

(request.contextPath is already defined by JSF, you could use it)

The <h:outputScript> tag is also useful to load existing script and resources from primeFaces, example, to load jquery:

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

(The library attribute in meaning of the path of a folder in resources folder)

回答2:

That's a fully expected behaviour. There is no src attribute define within <h:outputScript> tag. You have to use its name attribute like this:

<h:outputScript name="pacman.js"/>

As a side note, that of course means that your file is stored at webapp/resources folder of your web application.

来源：https://stackoverflow.com/questions/16304060/javascript-in-jsf-outputscript-with-no-library-no-name-and-no-body-content

标签

javascript

jsf

jsf-2

facelets