Anruffunktion nach dem Laden von Google benutzerdefinierte Suchergebnisse?

Question

Ich muss im Grunde einige jQuery-Code ausführen, nachdem die Suchergebnisse auf meiner Seite gerendert werden.

<div id="cse" style="width: 100%;">Loading</div> 
<script src="http://www.google.com/jsapi" type="text/javascript"></script> 
<script type="text/javascript"> 
google.load('search', '1', {language : 'en', style : google.loader.themes.V2_DEFAULT}); 
google.setOnLoadCallback(function() { 
var customSearchOptions = {}; 
var orderByOptions = {}; 
orderByOptions['keys'] = [{label: 'Relevance', key: ''},{label: 'Date', key: 'date'}]; 
customSearchOptions['enableOrderBy'] = true; 
customSearchOptions['orderByOptions'] = orderByOptions; var customSearchControl = new google.search.CustomSearchControl(
    'zzzzzzzzzzzz', customSearchOptions); 
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET); 
var options = new google.search.DrawOptions(); 
options.setAutoComplete(true); 
customSearchControl.setAutoCompletionId('zzzzzz:zzzzzzz+qptype:3'); 
options.enableSearchResultsOnly(); 
customSearchControl.draw('cse', options); 
function parseParamsFromUrl() { 
    var params = {}; 
    var parts = window.location.search.substr(1).split('\x26'); 
    for (var i = 0; i < parts.length; i++) { 
    var keyValuePair = parts[i].split('='); 
    var key = decodeURIComponent(keyValuePair[0]); 
    params[key] = keyValuePair[1] ? 
     decodeURIComponent(keyValuePair[1].replace(/\+/g, ' ')) : 
     keyValuePair[1]; 
    } 
    return params; 
} 

var urlParams = parseParamsFromUrl(); 
var queryParamName = "q"; 
if (urlParams[queryParamName]) { 
    customSearchControl.execute(urlParams[queryParamName]); 
} 
    }, true); 
</script> 

Oder den v2-Code:: Ich kann entweder den v1-Code verwende

<!-- Put the following javascript before the closing </head> tag. --> 

<script> 
    (function() { 
var cx = 'xxxxxxxxx'; 
var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; 
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + 
    '//www.google.com/cse/cse.js?cx=' + cx; 
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); 
    })(); 
</script> 

Ich habe versucht, meinen Funktionsaufruf an verschiedenen Stellen im Code, aber ohne Erfolg setzen.

Ich habe eine Funktion, die die Höhe des Containers, in dem die Suchergebnisse angezeigt werden, dynamisch festlegen muss. Wenn die Ergebnisse einmal geladen sind, muss ich sie aufrufen, andernfalls wird meine Seite falsch angezeigt.

Hier ist ein Link zu ihrer v2-API-Dokumentation: https://developers.google.com/custom-search/docs/element#cse-element und v1: https://developers.google.com/custom-search/docs/js/cselement-reference. Ich kann nichts sehen, wo beim Rendern von Suchergebnissen ein Rückruf erfolgt, nur bei der Initialisierung. Scheint verrückt, obwohl es keine Unterstützung für so etwas gibt.

Hier ist, was ich mit v2 ausprobiert habe:

(function() { 
     var cx = 'xxxxxxxxx'; 
     var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; 

     gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + 
      '//www.google.com/cse/cse.js?cx=' + cx; 
     gcse.onreadystatechange = gcse.onload = function() { 
      console.log("executed"); 
      SetMainHeight(20); 
     }; 
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); 

    })(); 

Die Konsole nie Ausgänge "ausgeführt". Ich merke auch in meiner Konsole habe ich den folgenden Fehler:

Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL http://www.google.com/cse?q=test&client=google-coop&hl=en&r=s&cx=xxxxx …s1%2Csr1&rurl=http%3A%2F%2Flocalhost%3A58257%2FSearch%3Fq%3Dtest#slave-1-1. Domains, protocols and ports must match.

Nicht sicher, ob das wichtig ist, da die Suchfunktion immer noch gut funktioniert. Ich teste dies auf localhost über http.

Answer 1

Leider v2 diese Fähigkeit nicht hat, aber in v1 können Sie:

.setSearchCompleteCallback(object, method)

Sie können danach suchen auf this page.

Answer 2

Für v2 zum Beispiel versuchen Sie, einen Onload-Handler auf das GCSE-Objekt (Skript) vor dem Einfügen in das DOM zu setzen.

gcse.onreadystatechange = gcse.onload = function() { 
    //execute my code 
}; 

grundsätzlich Sie am Ende mit:

<!-- Put the following javascript before the closing </head> tag. --> 

<script> 
    (function() { 
var cx = 'xxxxxxxxx'; 
var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; 
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + 
    '//www.google.com/cse/cse.js?cx=' + cx; 
gcse.onreadystatechange = gcse.onload = function() { 
    //execute your code here 
}; 
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); 
    })(); 
</script> 

Answer 3

Bisherige Lösungen nicht für mich arbeiten, aber hier ist es, was für mich gearbeitet:

<script> 
    (function() { 

    window.__gcse = { 
     callback: myCallback 
    }; 

    function myCallback() { 
     $('input.gsc-input').keyup(function(e) { if(e.keyCode == 13 || e.which == 13) { console.log('enter pressed'); }}); 
     $('input.gsc-search-button').on('click', function(e) { console.log('clicked');}); 
    } 
    var cx = '002806224466286757728:XXXXXXX'; 
    var gcse = document.createElement('script'); 
    gcse.type = 'text/javascript'; 
    gcse.async = false; 
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + 
     '//www.google.com/cse/cse.js?cx=' + cx; 
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(gcse, s); 
    })(); 
</script> 
<gcse:search></gcse:search> 

hoffe, das hilft