在多个页面上使用Processing.js

问题描述

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

I have a problem using processing.js across multiple pages.

我有一个母版页(test.html)，它通过jquery将所有页面加载到名为"contentarea"的div中.这只是"test.html"的摘录，所以您会明白:

I have a master page (test.html) which loads, via jquery, all pages into a div named "contentarea". This is just an exerpt of "test.html", just so you get the idea:

<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"- 仅).

As you can see the Test.html contains the processing reference "src="js/processing.js"" and will intercept any static "canvas data-processing-sources" on its own page ("test.html" - only).

将page1.html加载到test.html中时，processing.js不会初始化画布.但是，当单独查看页面(page1.html)时，processing.js会拦截画布数据处理源"并加载正常.

When page1.html is loaded into test.html, processing.js does not initialise the canvas. But when viewing the page (page1.html) on its own, processing.js intercepts "canvas data-processing-sources" and loads fine.

这是该问题的有效示例:

Here is a working example of the problem:

示例

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

问题:

如何获取processing.js来初始化(或重新初始化，刷新或加载)动态加载的画布?

How can I get processing.js to initialise (or re-initialise, or refresh, or load) a canvas that is dynamically loaded?

提前谢谢！

推荐答案

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

This might still be a problem since it won't be solved in the library until the next version: For now, the solution is to not rely on Processing auto-loading, since that only happens on DOMContentLoaded events. Instead, when you change page content you can grab the canvas's data-processing-sources attribute and create a new Processing instance from the indicated source code:

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！