Lazy loading Javascript, object not created from IE8 cache
- by doum-ti-di-li-doom
Unfortunately the bug does not happen outside of my application!
Scenario
index.php
<?php
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Last-Modified: '.gmdate('D, d M Y H:i:s').'GMT');
header('Cache-Control: no-cache, must-revalidate');
header('Pragma: no-cache');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Lazy loader</title>
</head>
<body>
...
<script type="text/javascript" src="internal.js"></script>
...
</body>
</html>
internal.js
myApp = {
timerHitIt: false,
hitIt: function () {
if (arguments.callee.done) { return; }
arguments.callee.done = true;
if (myApp.timerHitIt) { clearInterval(myApp.timerHitIt); }
var elt = document.createElement("script");
elt.async = true;
elt.type = "text/javascript";
elt.src = "external.js";
elt.onload = elt.onreadystatechange = function () { alert(typeof(something)); }
document.body.appendChild(elt);
}
}
if (document.addEventListener) { document.addEventListener("DOMContentLoaded", myApp.hitIt, false); }
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer src="+((location.protocol == "https:") ? "//:" : "javascript:void(0)")+"><\/script>");
document.getElementById("__ie_onload").onreadystatechange = function () {
if (this.readyState == "complete") { myApp.hitIt(); }
};
/*@end @*/
if (/WebKit/i.test(navigator.userAgent)) {
timerHitIt = setInterval(function () {
if (/loaded|complete/.test(document.readyState)) { myApp.hitIt(); }
}, 10);
}
window.onload = myApp.hitIt;
external.js
something = {};
alert(true);
Valid results are
undefined - true - object (± new request)
true - object (± cached javascript)
But sometimes, when hitting F5, I get
true - undefined
Does anyone have a clue why alert(true) is executed but something is not set?
