我有 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>
变量'pI'、函数名、canvasId是动态的。
现在我想在页面 Shape.xhtml 中位于不同位置的不同 Canvas 中动态绘制一些形状。在 Shape.xhtml 中，我指的是这样的 Processing 实例
<ui:include src="/Processing.xhtml">
<ui:param name="script" value="#{script}"/>
</ui:include>
包含 Processing.xhtml 后，我的 Shapes.xhtml 将如下所示
<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 和一个 body 标记。如果你真的想等到页面完全加载，你可以使用 window.onload。例如，在您的页面顶部，您可以执行以下操作:
my_funcs = [];
window.onload = function() {
for (f in my_funcs) {
f();
}
}
然后在你的每个脚本之后你可以做这样的事情:
my_funcs.push(loadFunc);
这保证了您的每个加载函数都将在页面完成加载时执行。但是，如果您真的不关心页面是否完全加载，您可以只在每个脚本末尾执行加载函数。
关于javascript - 如何动态加载不同的处理实例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4860296/