1

グーグルのカスタム検索から、私が理解できない奇妙な動作を取得しています。誰かが手がかりを持っているかもしれません。

独自の内部検索エンジンを持つ 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>-less 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

次に、 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?...

それは今スローされます。

ロード構文の 2 つの異なるバージョンがどのように変化するかはわかりませんが、そうではないように思われました。いずれにせよ、これらのクロス ドメイン エラーを解決する方法がよくわかりません。

考えは素晴らしいでしょう。

4

1 に答える 1

1

ノッシンハァッ？

ええと、私は基本的に、長期的にはより柔軟になると思う別の方法を使用して、良い解決策を考え出しました。グーグルのRESTfulAPIと単純な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

乾杯

于 2012-05-22T15:04:24.493 に答える