跨多个页面使用 Processing.js答案

【问题标题】：Using Processing.js across multiple pages跨多个页面使用 Processing.js
【发布时间】：2012-05-26 06:42:05
【问题描述】：

我在跨多个页面使用 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"”，并将拦截其自己页面上的任何静态“canvas data-processing-sources”（“test.html”- 仅）。

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

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

示例

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

问题：

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

提前谢谢你！

【问题讨论】：

标签： javascript jquery processing.js

【解决方案1】：

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

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

【讨论】：