javascript - How to load Google's Custom-search-engine(CSE) JS APIs after page loads?

Question

I am using Google Custom Search Engine with their new auto-completion feature. I want this whole javascript to be loaded AFTER the page itself is loaded. The original Google code is this:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('search', '1');
  google.setOnLoadCallback(function() {
    google.search.CustomSearchControl.attachAutoCompletion(
      'some-long-unique-id',
      document.getElementById('q'),
      'cse-search-box');
  });
</script>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=cs"></script>

I have transformed this code using tutorial about JS dynamic loading to this code:

(function() {
  var goog = document.createElement('script'); goog.type = 'text/javascript';
  goog.src = 'http://www.google.com/jsapi';
  var cse = document.createElement('script'); cse.type = 'text/javascript';
  cse.src = 'http://www.google.com/cse/brand?form=cse-search-box&lang=cs';
  goog.onload = function() {
    google.load('search', '1');
    google.setOnLoadCallback(function() {
      google.search.CustomSearchControl.attachAutoCompletion(
        'some-long-unique-id',
        document.getElementById('q'),
        'cse-search-box');
    });
  };
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(cse, s);
  s.parentNode.insertBefore(goog, s);
})();

Well, even though I think my solution should work(the same way has Google changed their Analytics on-demand asynchronous code), it doesn't. The page loads fine and as soon as CSE loads, the page goes blank. Something clears the DOM, I suppose its some kind of "Google thing" ? Can someone bring some light on this problem and possibly a working solution ?

Thanks

Answer 1

OK, so by checking Google Loader Developer's Guide and by lots of trying-and-testing I've figured how to change my code so it works as I expected in my question:

(function() {
  var goog = document.createElement('script'); goog.type = 'text/javascript';
  goog.src = 'http://www.google.com/jsapi';
  goog.onload = function() {
    google.load('search', '1', {"callback": function() {}});
    google.setOnLoadCallback(function() {
      google.search.CustomSearchControl.attachAutoCompletion(
        'some-long-unique-id',
        document.getElementById('q'),
        'cse-search-box');
    });
  };
  var cse = document.createElement('script'); cse.type = 'text/javascript';
  cse.src = 'http://www.google.com/cse/brand?form=cse-search-box&lang=cs';
  var s = document.getElementsByTagName('script')[0]; 
  s.parentNode.insertBefore(cse, s);
  s.parentNode.insertBefore(goog, s);    
})()

The main thing is this line:

google.load('search', '1', {"callback": function() {}});

If you don't specify callback (at least empty function as I do), then the whole page goes blank, when Google's CSE loads. I have no idea why, but it works fine now with this dummy callback function.

Hope it helps someone with the same problem.