Javascript 加载谷歌自定义搜索结果后调用函数?
在搜索结果呈现在我的页面上之后,我基本上需要运行一些jQuery代码。我可以使用v1代码:Javascript 加载谷歌自定义搜索结果后调用函数?,javascript,jquery,google-search,google-search-api,Javascript,Jquery,Google Search,Google Search Api,在搜索结果呈现在我的页面上之后,我基本上需要运行一些jQuery代码。我可以使用v1代码: <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('sea
<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>
控制台从不输出“已执行”。我还注意到在我的控制台中出现以下错误:
不安全的JavaScript试图访问URL为的帧关于:从URL为的帧为空…s1%2Csr1&rurl=http%3A%2F%2localhost%3A58257%2FSearch%3Fq%3Dtest#slave-1-1。域、协议和端口必须匹配
不确定这是否重要,因为搜索功能仍然可以正常工作。我正在通过http在localhost上进行测试。例如,对于v2,在将gcse对象(脚本)插入DOM之前,尝试将onload处理程序设置为gcse对象(脚本)
gcse.onreadystatechange = gcse.onload = function() {
//execute my code
};
基本上,你会得到:
<!-- 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>
(功能(){
变量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(){
//在这里执行代码
};
var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(gcse,s);
})();
不幸的是,v2没有此功能,但在v1中,您可以使用:
.setSearchCompleteCallback(对象、方法)
您可以在上搜索。以前的解决方案对我不起作用,但以下是对我起作用的:
<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>
(功能(){
窗口。\uuu gcse={
回调:myCallback
};
函数myCallback(){
$('input.gsc input').keyup(函数(e){if(e.keyCode==13 | | e.which==13){console.log('enter pressed');});
$('input.gsc search button')。在('click',函数(e){console.log('clicked');})上;
}
变量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);
})();
希望这有帮助您能否在容器上设置一个最小高度,以便在搜索失败时,至少有一些结构可以将布局固定在一起?已经有了一个最小高度。我正在我的页面上对各种容器进行一些粘性页脚和其他动态大小调整,所以基本上只要通过jQuery更改高度,我就需要重新计算某些高度。不需要调用。我确实在控制台中看到了一条错误消息,但可能与此无关,更新了我的问题。这是v2自定义搜索控件的文档说明,我相信这是实现此目的的唯一方法。您必须等待搜索脚本加载,然后在DOM包含您可能想要更改的内容之前执行。这就是我们从按钮中删除文本的方式,因此我们覆盖的背景图像样式显示一个图标,而不是“搜索”文本:窗口;
<!-- 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>
<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>