jsf.ajax.addOnEvent只有在我显式包含javax.faces:jsf.js时才有效

Question

我使用的JSF 2.2.4带有以下head标签：

<h:outputScript library="javax.faces" name="jsf.js" />

后来我发现了以下帖子，并删除了上面的代码，因为它将自动包含在内：将jsf.js.jsf重命名为jsf.js.xhtml

当我检查时，发现它是自动包含的，正如所说的，但我们在一个放在公共模板头部的脚本中遇到了错误。错误是脚本将对象jsf获取为未定义。这个脚本的目的是为所有JSF AJAX调用显示一个通用的加载程序。脚本如下：

//To display loading indicator for all JSF f:ajax calls.
jsf.ajax.addOnEvent(function(data) {
  var ajaxstatus = data.status; // Can be "begin", "complete" and "success"
  switch (ajaxstatus) {
    case "begin": // This is called right before ajax request is been sent.
      wizShowAjaxLoader();
      break;
    case "complete": // This is called right after ajax response is received.
      wizHideAjaxLoader();
      break;
    case "success": // This is called when ajax response is successfully processed.
      // NOOP.
      break;
  }
});

我想知道当我显式地包含jsf.js时，它为什么能工作。当我删除它时，脚本显示jsf对象为未定义对象。

Answer 1

您需要确保您的脚本在包含javax.faces:jsf.js之后被调用，原因很简单，因为只有在包含(并执行(javax.faces:jsf.js时，才会在JavaScript范围中定义jsf。

简而言之，您需要确保JavaScript代码流如下所示：

var jsf = ...;
...
jsf.ajax.addOnEvent(...);

因此并非如此：

jsf.ajax.addOnEvent(...);
...
var jsf = ...;

确保这一点的一种方法是将脚本作为<h:outputScript>包含在<h:body>中，并将target设置为head。

<h:head>
    ...
</h:head>
<h:body>
    <h:outputScript name="yourscript.js" target="head" />
    ...
</h:body>

JSF将确保在自动包含的脚本之后，它最终出现在HTML头中。

另一种选择是将其保持在<h:head>中，但将target设置为body。

<h:head>
    ...
    <h:outputScript name="yourscript.js" target="body" />
</h:head>

JSF将确保它最终出现在HTML主体的最后，这样它基本上就在DOM加载事件之前执行。

另请参阅：

• 如何在Facelets模板中引用CSS/JS/image资源