Some Processingjs fails to load in IE9

johanwas

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.

Replies(2)

akiersky

Re: Some Processingjs fails to load in IE9

1 years ago

I have found that IE is picky with console logs, if you don't have the developer tools open the page will error. maybe a log or println in your code somewhere is causing this same bug. try removing all traces and logs, alerts are ok.

also typically the doctype is all caps

<!DOCTYPE html>

but it says here ( http://www.w3schools.com/html5/tag_doctype.asp) that shouldn't matter.

good luck!
ak

dspringer..

Re: Some Processingjs fails to load in IE9

1 year ago

There's a bug in processing.js where it isn't passing back a valid debug handler when there's no console object in the browser and the script throws an exception. The following code is in the first 20 lines of processing.js.   Delete the parenthesis in "return nop()" and you won't have to press F12 when running any code that throws an exception.

var nop = function() {};
var debug = function() {
    if ("console" in window) return function(msg) {
        window.console.log("Processing.js: " + msg)
    };
    //return nop() //dss --original line broken
    return nop
}();

Top Reply