使用Javascript加载脚本 - 对chrome不起作用？

Question

I am trying to load the following script with Javascript:

function put() {
    var group = document.getElementById("obj_0123456790");
    var children = group.childNodes;

    for( var i = 0; i < children.length; i++ ) {    
        if( (children[i].name == 'movie') || (children[i].name == '') ) {
            children[i].src = "http://website.com/song.swf";
        }    
    }
}

if (window.attachEvent) {
    window.attachEvent('onload', put);
} else {
    if (window.onload) {
        var curronload = window.onload;
        var newonload = function() {
            curronload();
            put();
        };
        window.onload = newonload;
    } else {
        window.onload = put;
    }
}

I load it with the following code:

<script>
var i=document.createElement('script');
i.src="http://website.com/putter.js";
document.head.appendChild(i);
</script>

It works just fine on firefox, but it doesn't work on chrome. How can I make it work on chrome?

Answer 1

1.This function will work cross-browser for loading scripts asynchronously

function loadScript(src, callback)
{
  var s,
      r,
      t;
  r = false;
  s = document.createElement('script');
  s.type = 'text/javascript';
  s.src = src;
  s.onload = s.onreadystatechange = function() {
    //console.log( this.readyState ); //uncomment this line to see which ready states are called.
    if ( !r && (!this.readyState || this.readyState == 'complete') )
    {
      r = true;
      callback();
    }
  };
  t = document.getElementsByTagName('script')[0];
  t.parent.insertBefore(s, t);
}

2.If you've already got jQuery on the page, just use $.getScript(url, successCallback)

The simplest solution is to keep all of your scripts inline at the bottom of the page, that way they don't block the loading of HTML content while they execute. It also avoids the issue of having to asynchronously load each required script.

If you have a particularly fancy interaction that isn't always used that requires a larger script of some sort, it could be useful to avoid loading that particular script until it's needed (lazy loading).

3.Example from Google

<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js?onload=onLoadCallback';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

4.You might find this wiki article interesting : http://ajaxpatterns.org/On-Demand_Javascript

5.If its any help take a look at Modernizr . Its a small light weight library that you can asynchronously load your javascript with features that allow you to check if the file is loaded and execute the script in the other you specify.

Here is an example of loading jquery:

Modernizr.load([
  {
    load: '//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js',
    complete: function () {
      if ( !window.jQuery ) {
            Modernizr.load('js/libs/jquery-1.6.1.min.js');
      }
    }
  },
  {
    // This will wait for the fallback to load and
    // execute if it needs to.
    load: 'needs-jQuery.js'
  }
]);