Google WebSearch API自定义搜索会引发TypeErrors

kno*_*ose 5 javascript google-search google-search-api google-custom-search

我们在我们的网站上有一个自定义搜索栏,我注意到有时(9/10次)JS将抛出此错误,这会强制您搜索的内容无法呈现

www.googleapis.com/customsearch/v1element?key=AIzaSyCVAXiUzRYsML1Pv6RwSG1gu...oogle.com&callback=google.search.Search.apiary####&nocache=1446053383742:2

未捕获的TypeError:google.search.Search.apiary ####不是函数

抛出错误时搜索页面: 抛出错误时搜索页面

搜索页面,错误被截断/已解决 截断或解决错误时的搜索页面

但是,如果我要刷新或研究,这个错误就会被打破,并会呈现我的所有搜索.浏览文件后,我发现google.search.Search.apiary####他们所指的只提到一次.所以我相信这个错误会在它出现时截断整个文件.可能导致这种情况的原因是什么?

kno*_*ose 10

好吧,我偶然发现了一个答案: -

在做了一些研究之后,我发现Google论坛上的这个用户也有同样的问题.

简单地说,它的工作方式是使用a <script>来生成搜索栏.

您的搜索栏中有此功能+ html元素

<script>
 (function() {
   var cx = '###';
   var gcse = document.createElement('script');
   gcse.type = 'text/javascript';
   gcse.async = true;
   gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
       '//cse.google.com/cse.js?cx=' + cx;
   var s = document.getElementsByTagName('script')[0];
   s.parentNode.insertBefore(gcse, s);
 })();
</script>

<gcse:searchbox-only resultsUrl="/search-results"></gcse:searchbox-only>
Run Code Online (Sandbox Code Playgroud)

所以我们在我们的生成栏中生成了<div class="header">一个HAML元素,作为模板的一部分.因此它始终在每个标题中加载.由于我们有10个页面,因此每页生成一次相同的脚本.

我们的Google CSE会进行搜索,然后重定向到/search-results生成结果的网址.

要生成结果,您需要此功能和HTML

<script>
     (function() {
       var cx = '###';
       var gcse = document.createElement('script');
       gcse.type = 'text/javascript';
       gcse.async = true;
       gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
           '//cse.google.com/cse.js?cx=' + cx;
       var s = document.getElementsByTagName('script')[0];
       s.parentNode.insertBefore(gcse, s);
     })();
    </script>
Run Code Online (Sandbox Code Playgroud)

这与我们的标题中加载的内容相同.通过此设置,结果页面<script>在加载时会调用两次,并导致JS中断.因此,在删除<script>加载结果后,它停止抛出错误.

简而言之,只要确保你没有function在结果页面上两次调用相同的内容,它应该清除Uncaught TypeError.

别.重复.你自己

- 醚