如何在 facelet 页面中包含外部 javascript 文件？答案

【问题标题】：How to include external javascript file in a facelet page?如何在 facelet 页面中包含外部 javascript 文件？
【发布时间】：2012-05-17 05:20:31
【问题描述】：

在使用这样的 Facelet 模板的 Facelet 页面中：

<h:head>
    <h:outputScript name="custom.js" library="javascript" target="head"/>
</h:head>
<ui:composition template="../../WEB-INF/Template.xhtml">

</ui:composition>

如何包含自定义 javascript？在上面的代码中，我的 custom.js 被忽略了，因为 ui:composition facelet 标记。

我不想通过将我的 javascript 放入其中来弄乱我的页面，因此我将其外部化到我的资源中文件夹。

但是我该如何实现我的目标呢？

更新：

我基本上有这个按钮，我想在我的 primefaces 按钮的 oncomplete 事件上添加自定义 javascript。

<p:commandButton value="Save"
        actionListener="#{memberManagedBean.save}"
        oncomplete="handleSaveNewMember(xhr, status, args)"
        update=":memberListForm:membersTable"
        process="@form" />

但我没有将代码放入其中，而是将其外部化到我的 custom.js

function handleSaveNewMember(xhr, status, args) {
    /*More Code*/
    addMemberDlg.hide();
}

但是查看为我的按钮生成的 HTML，我的自定义 javascript 代码不包括在内，只添加了函数名称。

<button id="createupdateform:j_idt18" oncomplete:function(xhr, status, args){handleSaveNewMember(xhr, status, args);}});return false;" type="submit"><span class="ui-button-text">Save</span></button>

你认为为什么会这样？

更新 2

您应该在 ui:define facelet 标记内插入脚本，而不是在 ui:composition 内。

<ui:composition template="../../WEB-INF/Template.xhtml">
    <ui:define name="content">
        <h:outputScript name="showmembers.js" library="javascript" target="head"/>
    </ui:define>
</ui:composition>

【问题讨论】：

标签： jsf-2 primefaces

【解决方案1】：

你可以把它放在你的<ui:composition中

<ui:composition template="../../WEB-INF/Template.xhtml">
    <h:outputScript name="custom.js" library="javascript" target="head"/>
</ui:composition>

或将<h:outputScript 放在您的Template.xhtml 中

无论如何，<h:head> 最好只放在你的Template.xhtml 中......

【讨论】：

嗨丹尼尔，谢谢你，但你还能帮我解决我的问题吗？我已经更新了我的帖子。
我的回答解决了你原来的问题吗？关于你的新问题，你不应该看到你的 handleSaveNewMember 代码附加到你的按钮中，没关系，它将在你的 js 文件中......在按钮中你应该只看到对函数名称的引用 kust 就像你发布的，您可能需要单击一次 ctrl + F5 来刷新您的 js
嗨 Daniel.. 抱歉，我不确定我的问题是否真的得到了回答，因为单击按钮时我的对话框没有关闭。什么都没有发生。我在想我的代码没有被执行。
开始编写一个简单的 js 方法 closeDialog(){addMemberDlg.hide();} 并从 oncomplete="closeDialog()" 调用它当然你需要将它放在你的 js 文件中......
它甚至被调用了吗？ closeDialog(){alert('hey')} 你看到警报了吗？