Question

我试图推迟javascript文件，比如@BalusC的答案。

我正在使用Primefaces 5.3和Omnifaces 1.8。我试图使用Omnifaces 2.3，但它给了我错误。

我在这两个问题Defer loading and parsing of PrimeFaces JavaScript files和How to defer PrimeFaces.settings and Client Side Validation scripts with o:deferredScript

上做了所有提到的事情

使用过的脚本

DeferredPrimeFaces = function() {
    var deferredPrimeFaces = {};
    var calls = [];
    var settings = {};
    var primeFacesLoaded = !!window.PrimeFaces;

    function defer(name, args) {
        calls.push({ name: name, args: args });
    }

    deferredPrimeFaces.begin = function() {
        if (!primeFacesLoaded) {
            settings = window.PrimeFaces.settings;
            delete window.PrimeFaces;
        }
    };

    deferredPrimeFaces.apply = function() {
        if (window.PrimeFaces) {
            for (var i = 0; i < calls.length; i++) {
                window.PrimeFaces[calls[i].name].apply(window.PrimeFaces, calls[i].args);
            }

            window.PrimeFaces.settings = settings;
        }

        delete window.DeferredPrimeFaces;
    };

    if (!primeFacesLoaded) {
        window.PrimeFaces = {
            ab: function() { defer("ab", arguments); },
            cw: function() { defer("cw", arguments); },
            focus: function() { defer("focus", arguments); },
            settings: {}
        };
    }

    return deferredPrimeFaces;
}();

我创建了HeadRenderer

package com.example;

import java.io.IOException;

import javax.faces.application.ResourceDependencies;
import javax.faces.application.ResourceDependency;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.render.Renderer;

    @ResourceDependencies({
    @ResourceDependency(library="primefaces", name="primefaces.css"),
    @ResourceDependency(library="primefaces", name="primefaces.js"), // Only necessary when at least one validation JS files needs to be included.
    @ResourceDependency(library="primefaces", name="validation/validation.js"), // Only necessary when you need <p:clientValidator>.
    @ResourceDependency(library="primefaces", name="validation/beanvalidation.js") // Only necessary when you use JSR303 bean validation.
})
public class HeadRenderer extends Renderer {

    @Override
    public void encodeBegin(FacesContext context, UIComponent component) throws IOException {
        context.getResponseWriter().startElement("head", component);
    }

    @Override
    public void encodeChildren(FacesContext context, UIComponent component) throws IOException {
        // NOOP.
    }

    @Override
    public void encodeEnd(FacesContext context, UIComponent component) throws IOException {
        for (UIComponent resource : context.getViewRoot().getComponentResources(context, "head")) {
            resource.encodeAll(context);
        }

        context.getResponseWriter().endElement("head");
    }

}

并将其注册到faces.config.xml

<render-kit>
    <renderer>
        <component-family>javax.faces.Output</component-family>
        <renderer-type>javax.faces.Head</renderer-type>
        <renderer-class>com.example.HeadRenderer</renderer-class>
    </renderer>
</render-kit>

primefaces库的顺序

<link type="text/css" rel="stylesheet" href="/javax.faces.resource/primefaces.css.xhtml?ln=primefaces&amp;v=5.3">

<script async="" src="//www.google-analytics.com/analytics.js"></script>

<script type="text/javascript" src="/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&amp;v=5.3"></script>

<script type="text/javascript" src="/javax.faces.resource/primefaces.js.xhtml?ln=primefaces&amp;v=5.3"></script><script type="text/javascript" src="/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&amp;v=5.3"></script>

<link type="text/css" rel="stylesheet" href="/javax.faces.resource/watermark/watermark.css.xhtml?ln=primefaces&amp;v=5.3">

<script type="text/javascript" src="/javax.faces.resource/watermark/watermark.js.xhtml?ln=primefaces&amp;v=5.3"></script>

<script type="text/javascript">if(window.PrimeFaces){}</script>

我的xhtml文件是

<h:head>
 <h:outputScript name="js/primefaces.deferred.js" target="head"/>
 <o:deferredScript library="primefaces" name="primefaces.js" onbegin="DeferredPrimeFaces.begin()" />
 <o:deferredScript library="primefaces" name="jquery/jquery-plugins.js"/>
 <o:deferredScript library="primefaces" name="watermark/watermark.js" onsuccess="DeferredPrimeFaces.apply()"/>

控制台上显示错误，我在javacript函数上发出警报，它进入primefaces.deferred.js。发生错误后开始并应用函数运行：

primefaces.js.xhtml?ln=primefaces&v=5.3:2Uncaught ReferenceError: $ is not definedresolveUserAgent @ primefaces.js.xhtml?ln=primefaces&v=5.3:2init @ primefaces.js.xhtml?ln=primefaces&v=5.3:2(anonymous function) @ primefaces.js.xhtml?ln=primefaces&v=5.3:2
validation.js.xhtml?ln=primefaces&v=5.3:1Uncaught ReferenceError: $ is not defined(anonymous function) @ validation.js.xhtml?ln=primefaces&v=5.3:1
beanvalidation.js.xhtml?ln=primefaces&v=5.3:1Uncaught TypeError: Cannot set property 'javax.faces.validator.BeanValidator.MESSAGE' of undefined(anonymous function) @ beanvalidation.js.xhtml?ln=primefaces&v=5.3:1
gmap.js.xhtml?ln=primefaces&v=5.3:1Uncaught TypeError: Cannot read property 'DeferredWidget' of undefined(anonymous function) @ gmap.js.xhtml?ln=primefaces&v=5.3:1
primefaces.js.xhtml?ln=primefaces&v=5.3:1Uncaught TypeError: Cannot read property 'GMap' of undefinedcreateWidget @ primefaces.js.xhtml?ln=primefaces&v=5.3:1cw @ primefaces.js.xhtml?ln=primefaces&v=5.3:1(anonymous function) @ 0:19i @ jquery.js.xhtml?ln=primefaces&v=5.3:25fireWith @ jquery.js.xhtml?ln=primefaces&v=5.3:25ready @ jquery.js.xhtml?ln=primefaces&v=5.3:25bY @ jquery.js.xhtml?ln=primefaces&v=5.3:25
primefaces.js.xhtml?ln=primefaces&v=5.3:2Uncaught ReferenceError: $ is not definedresolveUserAgent @ primefaces.js.xhtml?ln=primefaces&v=5.3:2init @ primefaces.js.xhtml?ln=primefaces&v=5.3:2(anonymous function) @ primefaces.js.xhtml?ln=primefaces&v=5.3:2
validation.js.xhtml?ln=primefaces&v=5.3:1Uncaught ReferenceError: $ is not defined(anonymous function) @ validation.js.xhtml?ln=primefaces&v=5.3:1
beanvalidation.js.xhtml?ln=primefaces&v=5.3:1Uncaught TypeError: Cannot set property 'javax.faces.validator.BeanValidator.MESSAGE' of undefined(anonymous function) @ beanvalidation.js.xhtml?ln=primefaces&v=5.3:1
gmap.js.xhtml?ln=primefaces&v=5.3:1Uncaught TypeError: Cannot read property 'DeferredWidget' of undefined(anonymous function) @ gmap.js.xhtml?ln=primefaces&v=5.3:1
primefaces.js.xhtml?ln=primefaces&v=5.3:1Uncaught TypeError: Cannot read property 'GMap' of undefinedcreateWidget @ primefaces.js.xhtml?ln=primefaces&v=5.3:1cw @ primefaces.js.xhtml?ln=primefaces&v=5.3:1(anonymous function) @ 0:19i @ jquery.js.xhtml?ln=primefaces&v=5.3:25fireWith @ jquery.js.xhtml?ln=primefaces&v=5.3:25ready @ jquery.js.xhtml?ln=primefaces&v=5.3:25bY @ jquery.js.xhtml?ln=primefaces&v=5.3:25
primefaces.js.xhtml?ln=primefaces&v=5.3:2Uncaught ReferenceError: $ is not definedresolveUserAgent @ primefaces.js.xhtml?ln=primefaces&v=5.3:2init @ primefaces.js.xhtml?ln=primefaces&v=5.3:2(anonymous function) @ primefaces.js.xhtml?ln=primefaces&v=5.3:2
validation.js.xhtml?ln=primefaces&v=5.3:1 Uncaught ReferenceError: $ is not defined(anonymous function) @ validation.js.xhtml?ln=primefaces&v=5.3:1
beanvalidation.js.xhtml?ln=primefaces&v=5.3:1 Uncaught TypeError: Cannot set property 'javax.faces.validator.BeanValidator.MESSAGE' of undefined(anonymous function) @ beanvalidation.js.xhtml?ln=primefaces&v=5.3:1
gmap.js.xhtml?ln=primefaces&v=5.3:1 Uncaught TypeError: Cannot read property 'DeferredWidget' of undefined(anonymous function) @ gmap.js.xhtml?ln=primefaces&v=5.3:1
primefaces.js.xhtml?ln=primefaces&v=5.3:1Uncaught TypeError: Cannot read property 'GMap' of undefined

Answer 1

您必须将jquery-plugins部分放在onbegin部分之前。

 <h:outputScript name="js/primefaces.deferred.js" target="head"/>
 <o:deferredScript library="primefaces" name="jquery/jquery-plugins.js"/>
 <o:deferredScript library="primefaces" name="primefaces.js" onbegin="DeferredPrimeFaces.begin()" />
 <o:deferredScript library="primefaces" name="watermark/watermark.js" onsuccess="DeferredPrimeFaces.apply()"/>

Answer 2

从6.2开始，您还可以在web.xml中设置“ primefaces.MOVE_SCRIPTS_TO_BOTTOM”，它甚至不需要使用全功能。

延迟primefaces javascripts和css时的错误

2 个答案: