Javascript 如何动态加载不同的处理实例_Javascript_Jsf_Processing.js

Javascript 如何动态加载不同的处理实例

javascript jsf

Javascript 如何动态加载不同的处理实例,javascript,jsf,processing.js,Javascript,Jsf,Processing.js,我正在使用Processing.xhtml，它 <html> <head> <script language="JavaScript" src="../js/processing-1.0.0.min.js" type="text/javascript"></script> </head> <body onload="doIt();"> <div style="c

我正在使用Processing.xhtml，它

<html>
    <head>
        <script language="JavaScript" src="../js/processing-1.0.0.min.js" type="text/javascript"></script>
    </head>

    <body onload="doIt();">
        <div style="clear:both; float:left;">
            <canvas id="sketch" data-processing-sources="../js/k12-processing.pde"></canvas>
        </div>
        <script type="application/javascript">
            var pI;
            function doIt() {
                if (!pI) {
                    pI = Processing.getInstanceById('sketch');
                }
                #{script}
            }
        </script>
    </body>
</html>


var-pI；
函数doIt（）{
if（！pI）{
pI=Processing.getInstanceById（'sketch'）；
}
#{script}
}

变量'pI'，函数名，canvasId都是动态变量

现在我想在页面Shape.xhtml中不同位置的不同画布上动态绘制一些形状。在Shape.xhtml中，我指的是这样的处理实例

    <ui:include src="/Processing.xhtml">
        <ui:param name="script" value="#{script}"/>
    </ui:include>

<ui:composition>
    <ui:define>
        <html>
        ...
         <body onload="doIt_1">
             <canvas id="sketch_1">
             <script>...</script>
         </body>
   </html>

    <html>
    ...
     <body onload="doIt_2">
         <canvas id="sketch_2">
         <script>...</script>
     </body>
   </html>   
</uI:define>

包括Processing.xhtml之后，my Shapes.xhtml将如下所示

    <ui:include src="/Processing.xhtml">
        <ui:param name="script" value="#{script}"/>
    </ui:include>

<ui:composition>
    <ui:define>
        <html>
        ...
         <body onload="doIt_1">
             <canvas id="sketch_1">
             <script>...</script>
         </body>
   </html>

    <html>
    ...
     <body onload="doIt_2">
         <canvas id="sketch_2">
         <script>...</script>
     </body>
   </html>   
</uI:define>


...
...
...
...

body元素中的onload事件未正确触发。如何动态加载页面中的所有脚本？

Web浏览器通常只希望在单个页面中包含一个html和一个正文标记。如果确实要等待页面完全加载，可以使用window.onload。例如，在页面顶部，您可以执行以下操作：

my_funcs = [];
window.onload = function() {
  for (f in my_funcs) {
    f();
   }
}

my_funcs.push(loadFunc);

然后，在每个脚本之后，您可以执行以下操作：

my_funcs = [];
window.onload = function() {
  for (f in my_funcs) {
    f();
   }
}

my_funcs.push(loadFunc);

这保证了在页面完成加载时，每个加载函数都会被执行。但是，如果您并不真正关心页面是否已完全加载，您可以在每个脚本的末尾执行load函数。

这里有一个小错误：f（）应该是my_funcs[f]（）；