La búsqueda personalizada de Google - manual de carga/ejecutar desde la url params

StackOverflow https://stackoverflow.com//questions/10689070

Pregunta

Conseguir algún comportamiento extraño de la búsqueda personalizada de google que me parece que no puede suss.Tal vez alguien tiene una pista.

Estoy armando un sitio web de Magento, que tiene su propio motor de búsqueda interno -, pero no está limitada a sólo productos.Quiero implementar google resultados de la búsqueda personalizada en la página de resultados de búsqueda también.Me imagino que debe ser capaz de simplemente ejecutar una búsqueda basada en la consulta a los vars en la url (para devolver todos los productos no el contenido), tales como:

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

Voy a notar que me he tirado todo el contenido de la lógica (pero su implementación en magento es idéntico).

Por lo que el comportamiento es similar a esto:la página se carga bien (estoy retrasando la búsqueda de google con un tiempo de espera para propósitos de prueba ).Suponiendo que no es una consulta var en la url de la consola trazas como se esperaba.A continuación, la página sólo se evaporan, sin contenido de google."Aniquilada"...significado de todos los elementos en la página desaparecen, o son sobreescritos por una nueva página que google cargas.Como si la búsqueda de control no es la creación de un iframe - sólo la sustitución de la página con un <body>-menos de la página html.

He preparado una serie de artículos sobre el tema, y ha pasado por encima de la API - este código se ve como se debe trabajar.Pero claramente no lo es.

Lo que me estoy perdiendo?

Saludos -

ACTUALIZACIÓN

Continuó jugando con ello ha puesto de manifiesto que por el motivo que sea :

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

Fue la causa de la sustituye la página de edición.El respondió página, sin embargo, contiene enlaces a los módulo de búsqueda de google que es el anfitrión.Y si me vinculados manualmente esos archivos (renunciar a una google.load yo podría ejecutar una búsqueda como se esperaba:

<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

Entonces me encontré con una sintaxis alternativa en el los desarrolladores de google la página que parecía funcionar como se esperaba:

$(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);
        } 
    }

Que funciona como se espera.Sólo el verdadero problema en este punto es el anfitrión de

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

Que ahora se tira.

No sé cómo las dos versiones diferentes de la carga de la sintaxis cambia nada...pero parecía de.Cualquiera que sea el caso, yo estoy claro en cuanto a cómo resolver estos cruz errores de dominio.

Pensamientos sería genial.

¿Fue útil?

Solución

Nada, ¿eh?

Bien he trabajado básicamente una buena solución, utilizando un método alternativo que creo que va a ser más flexibles en el largo plazo.El uso de gafas API RESTful y simple de jquery .ajax llame, me puedes obtener una buena, controlable resultados sin errores de dominio:

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

Y usted puede también;D

Saludos

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top