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“”，并将在其自己的页面上截取任何静态“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初始化（或重新初始化，刷新或加载）动态加载的画布？

提前谢谢！

Answer 1

这可能仍然是一个问题，因为在下一个版本之前它不会在库中解决：现在，解决方案是不依赖于处理自动加载，因为仅发生在DOMContentLoaded事件上。相反，当您更改页面内容时，您可以获取画布的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);
}

跨多个页面使用Processing.js

1 个答案: