Lazy loading Javascript, object not created from IE8 cache

Posted by doum-ti-di-li-doom on Stack Overflow See other posts from Stack Overflow or by doum-ti-di-li-doom
Published on 2010-05-24T11:17:13Z Indexed on 2010/05/24 11:21 UTC
Read the original article Hit count: 321

Filed under:
|
|

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?

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about cache