如何在页面加载后加载Google的自定义搜索引擎（CSE）JS API？ [英] How to load Google's Custom-search-engine(CSE) JS APIs after page loads?

问题描述

我正在使用Google自定义搜索引擎及其新的自动完成功能。我希望在页面本身加载后加载整个javascript。最初的Google代码是：

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>

我使用关于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，我想它是某种谷歌的东西？有人可以解决这个问题并可能解决这个问题吗？

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 ?

谢谢

推荐答案

好的，所以通过查看 Google Loader开发人员指南和大量的尝试和测试我已经想出如何更改我的代码，因此它在我的问题中按预期工作：

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

主要是这一行：

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

如果你没有指定回调（至少是空函数），那么整页当Google的CSE加载时，它会变成空白。我不知道为什么，但现在使用这个虚拟回调函数工作正常。

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.

这篇关于如何在页面加载后加载Google的自定义搜索引擎（CSE）JS API？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！