Recherche personnalisée Google - chargement/exécution manuel à partir des paramètres d'URL

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

Question

J'obtiens un comportement étrange de la recherche personnalisée Google que je n'arrive pas à comprendre.Peut-être que quelqu'un a une idée.

Je suis en train de créer un site Magento, qui possède son propre moteur de recherche interne, mais limité aux produits uniquement.Je souhaite également implémenter les résultats de recherche personnalisés Google sur la page de résultats de recherche.Je pense que je devrais pouvoir simplement exécuter une recherche basée sur les variables de requête dans l'URL (pour renvoyer tout le contenu non-produit), en tant que tel :

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

Je noterai que j'ai retiré tous les autres contenus de la logique (mais son implémentation dans magento est identique).

Le comportement est donc le suivant :la page se charge correctement (je retarde la recherche Google avec un délai d'attente à des fins de test).En supposant qu'il existe une variable de requête dans l'URL, la console retrace comme prévu.Ensuite, la page est simplement effacée, sans aucun contenu de Google."Anéanti"...ce qui signifie que tous les éléments de la page disparaissent ou sont écrasés par une nouvelle page chargée par Google.Comme si le contrôle de recherche ne créait pas d'iframe, il remplaçait simplement la page par un <body>-page HTML sans.

J'ai préparé un certain nombre d'articles sur le sujet et parcouru API - ce code semble devoir fonctionner.Mais ce n’est clairement pas le cas.

Qu'est-ce que je rate?

Acclamations -

MISE À JOUR

Continuer à jouer avec cela a révélé que, pour une raison quelconque :

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

Était la cause du problème de page remplacée.La page répondue contenait cependant des liens vers le module de recherche hébergé par Google.Et si j'ai lié manuellement ces fichiers (en renonçant à un google.load) alors je pourrais lancer une recherche comme prévu :

<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

Ensuite, j'ai trouvé une syntaxe alternative sur le développeurs Google page qui semble fonctionner comme prévu :

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

Ce qui fonctionne comme prévu.Le seul vrai problème à ce stade est l'hôte de

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

Cela est maintenant abandonné.

Je ne sais pas comment les deux versions différentes de la syntaxe de chargement changent quoi que ce soit...mais cela semblait être le cas.Quoi qu’il en soit, je ne sais pas comment résoudre ces erreurs inter-domaines.

Les pensées seraient formidables.

Était-ce utile?

La solution

Rien, hein ?

Eh bien, j'ai essentiellement trouvé une bonne solution, en utilisant une méthode alternative qui, je pense, sera plus flexible à long terme.Utiliser Google API RESTful et jquery simple .ajax appel, je peux obtenir de bons résultats contrôlables sans erreurs inter-domaines :

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

Et vous pouvez aussi ;D

Acclamations

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top