跨多个页面使用Processing.js

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

我有一个母版页（test.html），它通过jquery将所有页面加载到名为“contentarea”的div中。 这只是“test.html”的一个例子，只是让你明白了：

   $(document).ready(function(){$("#contentarea").load("page1.html"); etc...  
... 

正如您所看到的，Test.html包含处理引用“src =”js / processing.js“”，并将在其自己的页面上拦截任何静态“canvas data-processing-sources”（ 仅限 “test.html”）。

当page1.html加载到test.html时，processing.js不会初始化canvas。 但是当自己查看页面（page1.html）时，processing.js会拦截“canvas data-processing-sources”并加载正常。

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

例

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

题：

如何让processing.js初始化（或重新初始化，刷新或加载）动态加载的canvas？

先感谢您！

Answer 1

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

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