Google自定义搜索 - getElement为null - 无法访问<gcse:...>元素

时间:2016-02-09 15:02:06

标签: javascript search prestashop

首先,我真的很抱歉我的英语(这真的很糟糕......)。 我的工作中存在很大问题。我想在页面加载时执行谷歌自定义搜索查询(prestashop网站)。我尝试了一切(使用谷歌api或1000个不同的论坛/网站)但我无法正常工作!

这是我的代码:

<div id="div_google_search" class="div_google_search">
            <script>
                var InitCSE = function() {
                    //google.search.cse.element.render();

                        var str="";

                        str= "{$search_query}";
                        var componentConfig = {
                            div: 'google_search',
                            tag: 'search',
                            gname: 'google_search',
                            attributes: {
                                    queryParameterName: 'query',
                                    enableHistory: true,
                                    enableAutoComplete: true
                                }
                          };
                        google.search.cse.element.render( componentConfig );

                        var gsearch = google.search.cse.element.getElement('google_search');
                        //console.log(gsearch);
                        gsearch.execute(str);
                };
                window.__gcse = {
                  parsetags: 'explicit',
                  callback: function()
                   {
                       if( document.readyState == 'complete' )
                       {
                           InitCSE();
                       }
                       else
                       {
                           google.setOnLoadCallback( function () { InitCSE(); }, true );
                       }
                   }
                };

                var loadElements = function(){
                    var cx = '123:456';
                      var gcse = document.createElement('script'); 
                      gcse.type = 'text/javascript';
                      gcse.async = true;
                      gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
                      //console.log(gcse);
                      var s = document.getElementsByTagName('script')[0]; 
                      s.parentNode.insertBefore(gcse, s);
                };
              (function() {
                loadElements();


              })();
            </script>
            <gcse:search gname="google_search"></gcse:search>
        </div>

错误:

  

未捕获的TypeError:无法读取属性&#39;执行&#39;为null

我知道变量gsearch无法获取元素&#34; google_search&#34;由于某些原因。我想知道为什么..

非常感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

我已经解决了问题!

我忘记了var componentConfig中指定的div:

var componentConfig = {
  

div:&#39; google_search&#39;,

                        tag: 'search',
                        gname: 'google_search',
                        attributes: {
                                queryParameterName: 'query',
                                enableHistory: true,
                                enableAutoComplete: true
                            }
                      };

结果:

<div id="div_gsearch" class="div_gsearch">
    <div id="google_search"></div>
        <script>
            var InitCSE = function() {
                //google.search.cse.element.render();

                    var str="";

                    str= "{$search_query}";
                    var componentConfig = {
                        div: 'google_search',
                        tag: 'search',
                        gname: 'google_search',
                        attributes: {
                                queryParameterName: 'query',
                                enableHistory: true,
                                enableAutoComplete: true
                            }
                      };
                    google.search.cse.element.render( componentConfig );

                    var gsearch = google.search.cse.element.getElement('google_search');
                    //console.log(gsearch);
                    gsearch.execute(str);
            };
            window.__gcse = {
              parsetags: 'explicit',
              callback: function()
               {
                   if( document.readyState == 'complete' )
                   {
                       InitCSE();
                   }
                   else
                   {
                       google.setOnLoadCallback( function () { InitCSE(); }, true );
                   }
               }
            };

            var loadElements = function(){
                var cx = '123:456';
                  var gcse = document.createElement('script'); 
                  gcse.type = 'text/javascript';
                  gcse.async = true;
                  gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
                  //console.log(gcse);
                  var s = document.getElementsByTagName('script')[0]; 
                  s.parentNode.insertBefore(gcse, s);
            };
          (function() {
            loadElements();


          })();
        </script>
        <gcse:search gname="google_search"></gcse:search>
    </div>