Question

我想在jsf / primefaces项目中实现pacman游戏。

可以找到游戏here。

这是我的jsf页面：

<!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>

我的页面中没有例外。但是，当我加载页面时，它看起来像：

enter image description here

你可以看到游戏没有添加！

知道如何解决这个问题吗？

更新

当我这样做时：

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

我也没有输出...... 的更新

我的文件夹结构：

enter image description here

Answer 1

<h:outputScript>标记只能用于从resources文件夹加载脚本。如果您希望从resources文件夹之外的其他文件夹加载，请使用以下代码：

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

其中request.contextPath是您网站的上下文路径（例如：/ pacman）。例：如果您的js文件位于此路径中：/ waitingScreen/audio/pacman.js 相应的代码：

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

（request.contextPath已由JSF定义，您可以使用它）

<h:outputScript>标记对于从primeFaces加载现有脚本和资源也很有用，例如，加载jquery：

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

（资源文件夹中文件夹路径含义中的library属性）

Answer 2

这是一个完全预期的行为。 <h:outputScript> tag中没有定义src属性。您必须使用其name属性，如下所示：

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

作为旁注，这当然意味着您的文件存储在Web应用程序的webapp/resources文件夹中。

JSF中的Javascript - 没有库，没有名称，没有正文内容的outputScript

2 个答案: