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

Question

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

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

我已经使用 tutorial about JS dynamic loading 转换了这段代码到此代码:

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

好吧，尽管我认为我的解决方案应该可行(Google 以同样的方式更改了他们的 Analytics 按需异步代码)，但事实并非如此。页面加载正常，一旦 CSE 加载，页面就会变成空白。清除 DOM 的东西，我想它是某种“Google 东西”？有人可以阐明这个问题并可能提供可行的解决方案吗？

谢谢

Answer 1

好的，所以通过检查 Google Loader Developer's Guide通过大量的尝试和测试，我想出了如何更改我的代码以使其按我在问题中预期的方式工作:

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

如果您不指定回调(至少像我一样是空函数)，那么在加载 Google 的 CSE 时整个页面会变成空白。我不知道为什么，但现在使用这个虚拟回调函数可以正常工作。

希望对遇到同样问题的人有所帮助。