如何在页面加载后加载Google的自定义搜索引擎(CSE)JS API？

Question

我正在使用Google自定义搜索引擎及其新的自动完成功能.我希望在页面本身加载后加载整个javascript.原始的Google代码是这样的:

<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>

我已经使用关于JS动态加载的教程将此代码转换为此代码:

(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);
})();

好吧,即使我认为我的解决方案应该可行(谷歌改变他们的分析按需异步代码的方式相同),但事实并非如此.页面加载正常,一旦CSE加载,页面就会变为空白.什么东西清除DOM,我想它是某种"谷歌的东西"？有人能否解决这个问题,可能还有一个有效的解决方案？

谢谢

Answer 1

好的,所以通过检查谷歌加载器开发人员指南和大量的尝试和测试,我已经想到了如何更改我的代码,以便它在我的问题中按预期工作:

(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);    
})()

主要是这一行:

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

如果你没有指定回调(至少是空函数),那么当谷歌的CSE加载时,整个页面都会变成空白.我不知道为什么,但现在使用这个虚拟回调函数工作正常.

希望它可以帮助有同样问题的人.