Some Processingjs fails to load in IE9
in
Processing with Other Languages
•
1 years ago
I might be totally alone with this problem since I haven't found any other pjs user stumbling on this recently.
The main problem is that the pjs-sketch will not load/start in IE9 until you press F12 (getting the developer tools pane up) and close it by pressing F12 again and then reload the sketch. Then it works excellent. This is really strange behaviour since not all sketches suffer from this in IE9. My pjs-sketch - loaded in the HTML-template that Processing2.0a1 produces (2.0a4 is not a good choice right now). All other browsers is fine with the sketch as expected.
I understood that this was an old problem for pjs that was supposed to be fixed around pjs 1.0.
Then I read something about how IE9 uses document formats
<meta
http-equiv
="
X-UA-Compatible
"
content
="
IE=9
" >. (This meta tag was also especially important to be placed first in order from <head>.) Related to that was that IE9 had this part (how it handles document formats) rewritten compared to older IE versions. Not sure how or why but it could affect the JS-part of that.
So I tried to find how (IE9-)working pages like
http://www.trevorbedford.com/coaltracejs/, http://sandropaganotti.com/wp-content/goodies/demos/twitter-stream/ &
http://www.clearcongressproject.com/ solved their html. They went on different approaches, I tried to mimic by placing the processing.js in the body instead of the head, !doctype etc.
I also found that that
<!doctype html> was very important from processingjs devs discussion.
But nothing helped my particular sketch from getting rid of the F12-bug. HTML as below, modified from the Processing2.0a1 template:
| <!doctype html> | |
| <html> | |
| <head> <meta http-equiv="X-UA-Compatible" content="IE=9" > |
|
| <meta http-equiv="content-type" content="text/html; charset=utf-8"> | |
| <title> MyPjs </title> | |
| <style type="text/css"> | |
| body { | |
| background-color: #333; color: #bbb; line-height: normal; | |
| font-family: Arial, sans-serif; | |
| font-size: 11px; font-weight: normal; text-decoration: none; | |
| line-height: 1.5em; | |
| } | |
| a, a:link, a:visited, a:active, a:hover { | |
| color: #cdcdcd; text-decoration: underline; | |
| } | |
| h1 { | |
| font-family: Arial, Helvetica Neue, Verdana, Geneva, sans-serif; | |
| width: 100%; letter-spacing: 0.1em; | |
| margin-bottom: 1em; font-size: 1.65em; | |
| } | |
| </style> | |
| <!--[if lt IE 9]> | |
| <script type="text/javascript">alert("Your browser does not support the canvas tag.");</script> | |
| <![endif]--> | |
| <script type="text/javascript">function getProcessingSketchID () { return 'MyPjs'; }</script> | |
| </head> | |
| <body> | |
| <div id="content"> | |
| <script src="processing.js" type="text/javascript"></script> | |
| <canvas id="MyPjs" data-processing-sources="MyPjs.pde" | |
| width="1024" height="700"> | |
| <p>Your browser does not support the canvas tag.</p> | |
| <!-- Note: you can put any alternative content here. --> | |
| </canvas> | |
| <noscript> | |
| <p>JavaScript is required to view the contents of this page.</p> | |
| </noscript> | |
| <script type="text/javascript"> | |
| if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x; | |
| var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number | |
| if (ieversion>=9) | |
| document.write("<br>If you are on IE9 and cannot see the sketch, please press F12 twice an then reload the page.") | |
| } | |
| </script> | |
| </body> | |
| </html> Any tips on explanations, further reading or guides would be great. |
|
1
