问题
I have a problem using processing.js across multiple pages.
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>
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).
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:
EXAMPLE
http://78revelationscom.ipage.com/site/test/test.html
QUESTION:
How can I get processing.js to initialise (or re-initialise, or refresh, or load) a canvas that is dynamically loaded?
Thank you in advance!
回答1:
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);
}
来源:https://stackoverflow.com/questions/10764198/using-processing-js-across-multiple-pages