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

我正在使用谷歌自定义搜索引擎的新自动完成功能。我希望在页面本身加载之后加载整个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>

好吧，尽管我认为我的解决方案应该有效（就像谷歌改变他们的按需分析异步代码一样），但事实并非如此。页面加载良好，一旦CSE加载，页面将变为空白。有些东西清除了DOM，我想这是某种“谷歌的东西”？有没有人能解释一下这个问题，并提出一个可行的解决方案

---

谢谢

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

好的，通过检查和大量的尝试和测试，我已经找到了如何更改代码，使其如我在问题中所预期的那样工作：

(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加载时，整个页面将变为空白。我不知道为什么，但它现在可以很好地使用这个伪回调函数

---

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

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

另外，您编写的函数（）提供的更新—不清楚如何调用这些函数。在中，文档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>

//使用jQuery文档加载功能。
$（文档）.ready（函数（）
{
//异步加载Google API。当脚本完全加载时，将调用回调“GooglePiloaded”。
$.getScript（“http://www.google.com/jsapi?key=yourkey“，Googleaded）；
//加载其他脚本，在此处执行其他初始化代码（不依赖于Google）。
});
函数GOOLEADED（）
{
//谷歌相关的初始化在这里。
//加载自定义搜索API。
//（可能使回调成为一个内嵌函数）。
$.getScript（“http://www.google.com/cse/brand?form=cse-搜索框&lang=cs“，CustomSearchApiLoaded）；
}
函数CustomSearchApiLoaded（）
{
load（'search'，'1'，LoadCustomSearchControl）；
}
函数LoadCustomSearchControl（）
{
google.search.CustomSearchControl.attachAutoCompletion（'some-long-unique-id'，document.getElementById（'q'），'cse搜索框'）；
}

将代码分解为不同的函数可能会有所帮助，以便更容易地跟踪问题所在。你必须在“google.load（）”函数中加入一个可选的回调函数，这很奇怪——这可能是谷歌代码中的一个bug，有一些是浮动的

我使用了

google.load（'search'，'1'，LoadCustomSearchControl）

，而不是

google.setOnLoadCallback

，因为据我所知，他们应该做同样的事情，在我看来，在

load（）

上使用回调更整洁

我强烈建议您使用jQuery（或任何JavaScript框架），因为它使生活变得更加简单

---

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

我不知道yepnope。看起来很不错。然而，在我的情况下，它对我没有帮助，因为当我使用时，同样的事情再次发生（正如我在问题中所描述的）。当按需加载，然后执行CSE所需的代码时，整个页面变为空白，整个DOM消失，页面如下：…Nicodems13：我已经发布了解决问题的有效方法。看到被接受的答案。好吧，是的，但你不明白为什么它现在起作用，只是它看起来起作用了。我的意思是，在我看来，这是一种进步，我还认为你们正在寻找替代方案和对这个问题的不同看法；否则使用StackExchange似乎有点毫无意义。谢谢！您还可以将setOnLoadCallback函数作为google.load的回调函数

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