3

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

4

3 回答 3

11

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

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

于 2011-08-10T17:33:26.997 回答
0

我不完全理解你想要达到的目标。您已经要求某人建议如何“更正”您的代码，但您没有给出任何上下文，或者您真正想要的最终结果是什么。

此外，您使用您编写的 function()s 提供的更新 - 不清楚这些是如何被调用的。在文件readyState完成的时候？

首先，我建议使用 jQuery 来包装 JavaScript 内容。是的，Google 为他们的 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.load('search', '1', LoadCustomSearchControl), 而不是google.setOnLoadCallback, 因为据我所知，他们应该做同样的事情，并且load()在我看来，使用回调 on 更整洁。

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

我很想看看我的建议是否有效，如果没有，哪里出错了。（确保添加您自己的 JSAPI 密钥）。

于 2011-08-17T11:26:42.157 回答
0

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

于 2011-08-10T11:18:58.580 回答