如何在頁面加載后加載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加載時，整個頁面都會變成空白。 我不知道為什么，但現在使用這個虛擬回調函數工作正常。

希望它可以幫助有同樣問題的人。

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.load('search', '1', LoadCustomSearchControl) ，而不是google.setOnLoadCallback ，因為據我所知他們應該做同樣的事情，並且在load()上使用回調更整潔， 在我看來。

我強烈建議你使用jQuery（或任何JavaScript框架），因為它使生活變得更容易。

我有興趣看看我建議的是否有效，如果沒有出錯。 （確保添加自己的JSAPI密鑰）。