Question

从谷歌自定义搜索获得一些奇怪的行为，我似乎无法理解。也许有人有线索。

我正在组建一个Magento网站，该网站有自己的内部搜索引擎 - 但仅限于产品。我也希望在搜索结果页面上实现Google自定义搜索结果。我想我应该能够简单地根据url中的查询变量执行搜索（以返回所有非产品内容），如下所示：

        <section style="min-height:600px">
            <div style="background-color:#DFDFDF; min-height:800px; width:100%;">
                <div id="cse">Loading</div>
            </div>
        <script src="http://www.google.com/jsapi" type="text/javascript"></script>
        <script type="text/javascript"> 
        //<![CDATA[

            $(document).ready( function(){ 
                console.log('search initiated');
                var t = window.setTimeout( function(){ customSearch(); }, 5000 );
            });

            function customSearch(){
                var q = urlParams()['q'];
                if (q != undefined && q != ""){
                    console.log('q : %s', q); //outputs successfully

                    google.load('search', '1');
                    google.setOnLoadCallback(function () {
                        var customSearchControl = new google.search.CustomSearchControl(MY CUSTOM ID KEY);
                        var cseDrawOptions = new google.search.DrawOptions();
                        cseDrawOptions.setAutoComplete(true); //unknown if this is required... 
                        customSearchControl.draw('cse',cseDrawOptions);                    
                        customSearchControl.execute(q);

                    }, true);

                } 
            }

           function urlParams(){
                    var vars = []; 
                    var hash;
                    var index = window.location.href.indexOf('?');
                    if( index != -1 ){
                        var hashes = window.location.href.slice(index + 1).split('&');
                        for(var i = 0; i < hashes.length; i++){
                            hash = hashes[i].split('=');
                            vars.push(hash[0]);
                            vars[hash[0]] = hash[1].replace(/\+/g, " ");
                        }
                    }
                    return vars;
                }

        //]>
        </script>
        </section>

我会注意到我已将所有其他内容从逻辑中删除（但它在magento中的实现是相同的）。

所以行为是这样的：页面加载正常（我推迟谷歌搜索超时以进行测试）。假设url中有一个查询var，控制台会按预期跟踪。然后该页面被彻底删除，没有来自谷歌的内容。 “擦掉”......意味着页面上的所有元素都会消失，或者被谷歌加载的新页面覆盖。好像搜索控件没有创建iframe - 它只是用<body> - 更少的html页面替换页面。

我已经准备了很多关于这个主题的文章，并且已经过了API - 这段代码看起来应该可行。但显然不是。

我错过了什么？

干杯 -

更新

继续搞乱这一点已经显示出无论出于何种原因：

google.load('search', '1');
google.google.setOnLoadCallback( console.log('loaded') )

是替换页面问题的原因。响应页面包含谷歌托管的搜索模块的链接。如果我手动链接这些文件（放弃google.load），那么我可以按预期运行搜索：

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://www.google.com/uds/?file=search&v=1" type="text/javascript"></script>
<script type="text/javascript"> 
//<![CDATA[
  ... search logic

然后我在google developers页面上找到了一个似乎按预期工作的替代语法：

$(document).ready( function(){ 
        google.load("search", "1", {"callback" : customSearch});
    });

    function customSearch(){
        var q = urlParams()['q'];
        if (q != undefined && q != ""){
            var cseControl = new google.search.CustomSearchControl('MY CUSTOM KEY');

            var cseDrawOptions = new google.search.DrawOptions();
            cseDrawOptions.enableSearchResultsOnly()
            cseControl.draw('cse', cseDrawOptions);
            cseControl.execute(q);
        } 
    }

哪个按预期工作。此时唯一真正的问题是

的主持人

Unsafe JavaScript attempt to access frame with URL http://mydomain from frame with URL http://www.google/cse?...

现在被抛出。

我不知道两种不同版本的加载语法如何改变任何东西......但似乎是这样。无论如何，我都不清楚如何解决这些跨域错误。

思想会很棒。

Answer 1

没什么？

嗯 - 我基本上已经找到了一个很好的解决方案，使用了我认为从长远来看会更灵活的替代方法。使用谷歌 RESTful API 和简单的jquery .ajax调用，我可以获得良好，可控的结果，没有跨域错误：

<div id="cse">Loading</div>
<script>
    //https://developers.google.com/custom-search/v1/getting_started
    //https://developers.google.com/custom-search/v1/using_rest#query-params
    //https://developers.google.com/custom-search/v1/cse/list

    var _url    = "https://www.googleapis.com/customsearch/v1";
    var _key    = 'AIzaSy... your api key here'; 
    var _cx     = '001809... your engine id';
    var _q      = urlParams()['q'];                         //query param

    jQuery(document).ready(function() {

        $j.ajax({
            url     : _url,
            type    : 'GET',
            dataType : 'jsonp',
            data :{
                key : _key,
                cx  : _cx,
                q   :_q 
            },
            success     : function(data, textStatus, jqXHR){ responseHandler(data); },
            error       : function(jqXHR, textStatus, errorThrown){ console.log('error: %s'), errorThrown},
            beforeSend  : function(){ console.log('sending request')},
            crossDomain : true
        });

    });

    function responseHandler( response, status) {
        console.log(response);

        var cse = $j('#cse');  // render vars as needed...
        for (var i = 0; i < response.items.length; i++) {
            var item = response.items[i];
            cse.append( "<br>" + item.htmlTitle);
        }
    }

    function urlParams(){
        var vars = []; 
        var hash;
        var index = window.location.href.indexOf('?');
        if( index != -1 ){
            var hashes = window.location.href.slice(index + 1).split('&');
            for(var i = 0; i < hashes.length; i++){
                hash = hashes[i].split('=');
                vars.push(hash[0]);
                vars[hash[0]] = hash[1];
            }
        }
        return vars;
    }

</script>

你也可以; D

干杯

Google自定义搜索 - 从url params手动加载/执行

1 个答案: