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>

我已使用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);
})();

好吧，即使我认为我的解决方案应该有效（谷歌也改变了他们的分析按需异步代码），但事实并非如此。页面加载正常，一旦CSE加载，页面就会变为空白。什么东西清除DOM，我想它是某种“谷歌的东西”？有人能否解决这个问题并可能解决这个问题？

由于

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加载时整个页面都会变为空白。我不知道为什么，但现在使用这个虚拟回调函数工作正常。

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

Answer 2

我猜你可以使用一些js加载器（例如yepnope），它允许你按需加载js并添加一个回调。

Answer 3

我并不完全明白你想要达到的目标。您已经要求某人建议如何“更正”您的代码，但您没有给出任何背景信息，或者您实际想要的最终结果。

此外，您已经使用函数（）提供的更新 - 您不清楚如何调用这些更新。在文件readyState完成时？

首先，我建议使用jQuery来包装JavaScript的东西。是的，谷歌为他们的API提供onload事件和其他助手，但jQuery将适用于任何Javscript，使用两个你不需要的Javascript框架是没有意义的。

jQuery可能是这样的：

<script type="text/javascript" language="javascript" src="/js/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript">
    // Use the jQuery document load functionality.
    $(document).ready(function ()
    {
        // Load the Google API asynchronously.  The callback 'GoogleApiLoaded' will be called when the script is fully-loaded.
        $.getScript("http://www.google.com/jsapi?key=yourkey", GoogleApiLoaded);    
        // Load other scripts, do other init code here (non-Google-dependent).
    });

    function GoogleApiLoaded()
    {
        // Google-related init here.
        // Load the custom search API.
        // (Could make the callback an in-line function).
        $.getScript("http://www.google.com/cse/brand?form=cse-search-box&lang=cs", CustomSearchApiLoaded);
    }

    function CustomSearchApiLoaded()
    {
        google.load('search', '1', LoadCustomSearchControl);
    }

    function LoadCustomSearchControl()
    {
        google.search.CustomSearchControl.attachAutoCompletion('some-long-unique-id', document.getElementById('q'), 'cse-search-box');
    }
</script>

将代码拆分为不同的功能可能会有所帮助，以便更容易地跟踪问题所在。您必须在'google.load（）'函数中添加一个可选的回调函数很奇怪 - 它可能是Google代码中的一个错误，有一些浮动。

我使用的是google.load('search', '1', LoadCustomSearchControl)，而不是google.setOnLoadCallback，因为据我所知他们应该做同样的事情，并且在load()上使用回调是更整洁的，我的观点。

我强烈建议您使用jQuery（或任何JavaScript框架），因为它可以让生活变得更轻松。

我有兴趣看看我建议的是否有效，如果不是出错的话。（确保添加自己的JSAPI密钥）。

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

3 个答案: