Google 맞춤 검색 - URL 매개변수에서 수동 로드/실행

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

문제

Google 맞춤 검색에서 내가 의심할 수 없는 이상한 동작이 발생합니다.어쩌면 누군가가 단서를 가지고 있을 수도 있습니다.

저는 자체 내부 검색 엔진을 갖고 있지만 제품에만 국한되는 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에서의 구현은 동일합니다).

따라서 동작은 다음과 같습니다.페이지가 잘 로드됩니다(테스트 목적으로 시간 초과로 Google 검색을 지연하고 있습니다).URL에 쿼리 변수가 있다고 가정하면 콘솔이 예상대로 추적합니다.그런 다음 Google에서 콘텐츠를 반환하지 않고 페이지가 지워집니다."지워졌다"…이는 페이지의 모든 요소가 사라지거나 Google이 로드하는 새 페이지로 덮어쓰여진다는 의미입니다.마치 검색 컨트롤이 iframe을 생성하지 않는 것처럼 - 단지 페이지를 <body>-적은 HTML 페이지.

나는 그 주제에 관한 많은 기사를 준비했고, API - 이 코드는 제대로 작동할 것 같습니다.그러나 분명히 그렇지 않습니다.

내가 무엇을 놓치고 있나요?

건배 -

업데이트

이것에 대해 계속해서 장난을 치다 보니 어떤 이유에서든 다음과 같은 사실이 드러났습니다.

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

교체된 페이지 문제의 원인이었습니다.그러나 응답된 페이지에는 Google이 호스팅하는 검색 모듈에 대한 링크가 포함되어 있습니다.그리고 해당 파일을 수동으로 연결한 경우( 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

그런 다음 대체 구문을 찾았습니다. 구글 개발자 예상대로 작동하는 것처럼 보였던 페이지:

$(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?...

이제 던져집니다.

로드 구문의 두 가지 다른 버전이 어떻게 변경되는지 모르겠습니다...하지만 그럴 것 같았습니다.어떤 경우이든 이러한 도메인 간 오류를 해결하는 방법이 확실하지 않습니다.

생각은 좋을 것입니다.

도움이 되었습니까?

해결책

아무것도 아니야?

글쎄요. 저는 기본적으로 장기적으로 더 유연할 것으로 생각되는 대체 방법을 사용하여 좋은 해결책을 찾았습니다.구글 사용 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

건배

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top