每次加载 Facelets 组件时调用 JavaScript 函数

calling a javascript function everytime a facelets component is loaded

本文关键字：调用 JavaScript 函数 组件 加载 Facelets      更新时间：2023-09-26

我已经创建了一个自定义的小面组件，每次加载组件时，我都需要根据它从 bean 获得的值为组件设置一些值。我在组件中使用了 window.onload 函数，当页面中只有一个该组件时，它可以正常工作。但是当我在页面中使用一个或多个此组件时，只有第一个组件获得其值集。我需要一个很好的方法来克服这个问题。

我的 xhtml 是这样的

<ui:composition>
    <f:subview id="#{id}">
        <div id="script" style="display: none;">
            <script type="text/javascript">
    //<![CDATA[ 
        window.onload = function() {
           //this function manipulates the value from the bean 
            };           

        function processNepCal(){
                     //this function is for processing the changed values
        }
        // ]]>
    </script>
        </div>
        <rich:calendar datePattern="yyyy-MM-d" id="gregCal"
            rendered="#{backingBean.dataSetParam.userSession.nepDate }"
            value="#{value}" inputClass="#{empty styleClass ? '' : styleClass}" />
        <h:panelGroup
            rendered="#{!backingBean.dataSetParam.userSession.nepDate}">
            <h:panelGrid columns="3">
                <rich:comboBox id="nepCalYear" styleClass="datecls"
                    defaultLabel="year" onchange="processNepCal()" width="53px"
                    readonly="true" directInputSuggestions="true">
                    <f:selectItem itemLabel="2067" itemValue="2067" />
                    <f:selectItem itemLabel="2068" itemValue="2068" />
                    <f:selectItem itemLabel="2069" itemValue="2069" />
                    <f:selectItem itemLabel="2070" itemValue="2070" />
                </rich:comboBox>
                <rich:comboBox id="nepCalMonth" styleClass="datecls"
                    onchange="processNepCal()" width="65px" readonly="true"
                    defaultLabel="month" directInputSuggestions="true">
                    <f:selectItem itemLabel="Baisakh" itemValue="Baisakh" />
                    <f:selectItem itemLabel="Jestha" itemValue="Jestha" />
                    <f:selectItem itemLabel="Ashad" itemValue="Ashad" />
                    <f:selectItem itemLabel="Shrawan" itemValue="Shrawan" />
                    <f:selectItem itemLabel="Bhadra" itemValue="Bhadra" />
                    <f:selectItem itemLabel="Ahswin" itemValue="Ahswin" />
                    <f:selectItem itemLabel="Kartik" itemValue="Kartik" />
                    <f:selectItem itemLabel="Mangsir" itemValue="Mangsir" />
                    <f:selectItem itemLabel="Paush" itemValue="Paush" />
                    <f:selectItem itemLabel="Magh" itemValue="Magh" />
                    <f:selectItem itemLabel="Falgun" itemValue="Falgun" />
                    <f:selectItem itemLabel="Chaitra" itemValue="Chaitra" />
                </rich:comboBox>
                <rich:comboBox id="nepCalDay" styleClass="datecls"
                    onchange="processNepCal()" width="43px" readonly="true"
                    defaultLabel="day" directInputSuggestions="true">
                    <f:selectItem itemLabel="01" itemValue="01" />
                    <f:selectItem itemLabel="02" itemValue="02" />
                    <f:selectItem itemLabel="03" itemValue="03" />
                    <f:selectItem itemLabel="04" itemValue="04" />
                    <f:selectItem itemLabel="05" itemValue="05" />
                    <f:selectItem itemLabel="06" itemValue="06" />
                    <f:selectItem itemLabel="07" itemValue="07" />
                    <f:selectItem itemLabel="08" itemValue="08" />
                    <f:selectItem itemLabel="09" itemValue="09" />
                    <f:selectItem itemLabel="10" itemValue="10" />
                    <f:selectItem itemLabel="11" itemValue="11" />
                    <f:selectItem itemLabel="12" itemValue="12" />
                    <f:selectItem itemLabel="13" itemValue="13" />
                    <f:selectItem itemLabel="14" itemValue="14" />
                    <f:selectItem itemLabel="15" itemValue="15" />
                    <f:selectItem itemLabel="16" itemValue="16" />
                    <f:selectItem itemLabel="17" itemValue="17" />
                    <f:selectItem itemLabel="18" itemValue="18" />
                    <f:selectItem itemLabel="19" itemValue="19" />
                    <f:selectItem itemLabel="20" itemValue="20" />
                    <f:selectItem itemLabel="21" itemValue="21" />
                    <f:selectItem itemLabel="22" itemValue="22" />
                    <f:selectItem itemLabel="23" itemValue="23" />
                    <f:selectItem itemLabel="24" itemValue="24" />
                    <f:selectItem itemLabel="25" itemValue="25" />
                    <f:selectItem itemLabel="26" itemValue="26" />
                    <f:selectItem itemLabel="27" itemValue="27" />
                    <f:selectItem itemLabel="28" itemValue="28" />
                    <f:selectItem itemLabel="29" itemValue="29" />
                    <f:selectItem itemLabel="30" itemValue="30" />
                    <f:selectItem itemLabel="31" itemValue="31" />
                    <f:selectItem itemLabel="32" itemValue="32" />
                </rich:comboBox>
            </h:panelGrid>
            <h:inputText id="nepCalVal" value="#{value}"
                styleClass="#{empty styleClass ? '': styleClass}"
                style="display:none;">
                <f:converter converterId="NepaliDateConverter"></f:converter>
            </h:inputText>
        </h:panelGroup>
    </f:subview>
</ui:composition>

首先，你为什么不直接使用组件的value属性呢？ 

<x:someComponent value="#{bean.value}" />

如有必要，请直接在豆子中或在完整的Converter的帮助下进行操作。

至于你的具体问题，每次你声明一个window.onload = function() {}之前声明的就会被覆盖。该窗口只能有一个加载功能。您基本上需要将它们全部放在同一个加载函数中。

最好改用element.addEventListener。这是一个跨浏览器兼容的代码段：

function addEvent(element, event, func) {
    if (element.addEventListener) {
        element.addEventListener(event, func, false); // Real browsers.
        return true;
    } else if (element.attachEvent) {
        return element.attachEvent("on" + event, func); // MSIE<=8.
    } else {
        return false; // Really ancient browsers.
    }
}

以便您可以使用

addEvent(window, "load", function() {
    // Do here your thing.
});
相关文章：