跨多个页面使用Processing.js

Question

我在跨多个页面使用processing.js时遇到了问题。

我有一个母版页(test.html)，它通过jquery将所有页面加载到一个名为"contentarea“的div中。这只是对"test.html“的一种运用，只是为了让您知道：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>  
<script src="js/processing.js"></script>
<script> 
$(document).ready(function(){$("#contentarea").load("page1.html");
etc...
</script>
<div id="contentarea">...</div>

如您所见，Test.html包含处理引用“src=”js/processing.js“，并将拦截它自己页面上的任何静态”画布数据处理-源“("test.html”)。

当page1.html加载到test.html中时，processing.js不会初始化画布。但是，当单独查看页面(page1.html)时，processing.js拦截“画布数据处理-源”并加载良好。

下面是这个问题的一个工作示例：

示例

http://78revelationscom.ipage.com/site/test/test.html

问题：

如何使processing.js初始化(或重新初始化、刷新或加载)动态加载的画布？

提前谢谢你！

Answer 1

这可能仍然是一个问题，因为它在下一个版本之前不会在库中解决:目前，解决方案是不依赖于处理自动加载，因为这只发生在DOMContentLoaded事件上。相反，当您更改页面内容时，您可以获取画布的数据处理源属性，并从指定的源代码中创建一个新的处理实例：

function loadSketchOnContentSwap() {
    var canvas = /* get the relevant canvas however you want */
    var sources = canvas.getAttribute("data-processing-sources").split(/\s+/);
    Processing.loadSketchFromSources(canvas, sources);
}