加载谷歌自定义搜索结果后调用函数
Call function after loading google custom search results?
在搜索结果显示在我的页面上后,我基本上需要运行一些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('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>
或者v2代码:
<!-- 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>
我试过把函数调用放在代码的不同位置,但都没有用。
我有一个函数,需要动态设置搜索结果显示在其中的容器的高度,所以一旦加载结果,我就需要调用它,否则我的页面会显示错误。
以下是他们的v2 API文档的链接:https://developers.google.com/custom-search/docs/element#cse-元素和v1:https://developers.google.com/custom-search/docs/js/cselement-reference。我看不到任何在搜索结果呈现时有回调的地方,只有在初始化时。虽然没有人支持这样的事情,但这似乎很疯狂。
以下是我在v2中尝试的内容:
(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);
})();
控制台从不输出"已执行"。此外,我注意到在我的控制台中,我有以下错误:
不安全的JavaScript尝试访问URL为的帧关于:来自URL为的框架的空白http://www.google.com/cse?q=test&client=谷歌合作社;hl=en&r=s&cx=xxxxx…s1%2Csr1&rurl=http%3A%2F%2localhost%3A58257%2FSearch%3Fq%3Dtest#slave1-1。域、协议和端口必须匹配。
不确定这是否重要,因为搜索功能仍然可以正常工作。我正在通过http在本地主机上测试这一点。
以前的解决方案对我不起作用,但对我起作用的是:
<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>
希望这能帮助
不幸的是,v2没有这个能力,但在v1中你可以使用:
.setSearchCompleteCallback(object, method)
你可以在这个页面上搜索它。
例如,对于v2,在将gcse对象(脚本)插入DOM之前,尝试将其设置为onload处理程序。
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>
- 如何从模块链中调用函数.导出到节点中
- 调用函数内部的函数
- 在javascript中调用c函数
- DropDownListFor赢得't在更改时调用函数
- Javascript页面调用函数
- 在动画结束之前调用函数
- 允许父窗口在其不同域的子iframe上调用函数
- 运行Infinite Scroll后调用函数时出现问题
- JavaScript:在调用函数的文本输入上按enter键
- 使用大括号和不使用bracs调用函数的区别
- javascript在事件上调用函数
- 从index.html调用函数,该函数无限循环
- 从带参数的字符串变量调用函数中的函数
- 为什么 JS 不在滚动时调用函数
- 是否可以在不更改上下文的情况下调用函数.apply
- 如何在ES6类中使用参数调用函数
- AngularJS:调用函数时编号不更新
- JavaScript中的立即调用函数表达式(IIFE)-传递jQuery
- 在JavaScript中调用函数时自定义此选项
- 调用函数中声明的变量