Make IE7 load javascript first then call function

Question

IE7 gives the following error: 'myapp' is undefined

//home.html
<script type="application/x-javascript" src="//www.mysite.com/myjs.js"></script>
<script type="text/javascript" charset="utf-8">
    new myapp.myfunc();
</script>

javascript file:

//myjs.js
myapp = {
    myfunc : function(){
        alert('hello world');
    }
};

*I understand there are many ways to rewrite the code that is used on home.html, but I want to make this work without changing that. I found a working example with similar structure and no JS errors (IE7, IE6). https://google-developers.appspot.com/custom-search-ads/docs/sample

EDIT: The < script > code will be given to external clients, so I want to keep it as simple as possible. See example link.

Answer 1

Occam's razor suggests that either IE/MSHTML does not support script elements with type="application/x-javascript". That might have to do with the fact that application/x-javascript is not a registered MIME media type, nor was it ever necessary.

Or it has to do with the fact that //www.mysite.example.com/myjs.js is not a supported URI-reference in that environment. Use fully-qualified URIs like http://www.mysite.example.com/myjs.js instead. (And please use the registered example domains for examples.)

You should also declare identifiers that you intend to use as variables:

var myapp = {
  …
};

If you do not do this, problems can occur if there is an element named myapp in the document. In JScript/MSHTML, identifier resolution will find a host object in the scope chain that has myapp as its property. The value of that property will be a reference to the corresponding element object, and attempting to overwrite that property value will cause a runtime error.

Answer 2

Add an event handler to the body's Load event. In that event handler, make your myapp.myfunc() call.

Answer 3

Whenever you're making your code available for consumption, you always want to make sure you're being a good citizen on the page. That means you don't want to create unnecessary global variables, and make sure ones you do create are unique enough. Thats why it's a good idea to wrap your code in an immediately-invoked function expression.

Also, it's generally just easier to do the whole thing with javascript. This is how Google analytics and Facebook plugins load their code.

<script type="text/javascript">
(function() {
  var loadScript = function(src, callback) {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = src;
    // modern browsers
    script.onload = callback;
    // IE 6 & 7
    script.onreadystatechange = function() {
      if (this.readyState == 'complete') {
        callback();
      }
    }
    head.appendChild(script);
  };
  loadScript('path/to/myscript.js', function() {
     //script loaded
  });
})();
</script>