如何在同一页面上显示多个Google自定义搜索字段 [英] How to have multiple Google Custom Search field on the same page
问题描述
我正在尝试使用Google自定义搜索（GCS）在同一页面上设置多个搜索字段：
I'm trying to have multiple search field on the same page with Google Custom Search (GCS) like this :
<script>
(function() {
var cx = 'user_id:field_id1';
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>
<gcse:search></gcse:search>
<script>
(function() {
var cx = 'user_id:field_id2';
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>
<gcse:search></gcse:search>
不幸的是，它不起作用。对每个字段使用相同的 cx 进行搜索。当它在此地址上执行ajax请求时： https://www.googleapis.com/customsearch/v1element ...有这个值：& cx = user_id：field_id1 ，两个字段的值相同。
Unfortunatly, It does not work. The search is made with the same cx for every field. When It do the ajax request on this address : https://www.googleapis.com/customsearch/v1element... there is this value : &cx=user_id:field_id1 and the value is the same for both fields.
解决方案是什么？
我已经看到了这个问题：同一页面上的多个Google CSE（自定义搜索引擎）框，但似乎是另一个版本。
I already seen this question : Multiple Google CSE (Custom Search Engine) Boxes on Same Page, but it seems to be on another version.
推荐答案
尝试使用 iFrames ：
<html>
<head>
<title></title>
<style type="text/css">
/* Layout Style */
</style>
</head>
<body>
<iframe src="gcse1.html"></iframe>
<iframe src="gcse2.html"></iframe>
</body>
</html>
gcse1.html
gcse1.html
<html>
<head>
<title></title>
</head>
<body>
<script>
(function() {
var cx = 'user_id:field_id1';
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>
<gcse:search></gcse:search>
</body>
</html>
gcse2.html
gcse2.html
<html>
<head>
<title></title>
</head>
<body>
<script>
(function() {
var cx = 'user_id:field_id2';
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>
<gcse:search></gcse:search>
</body>
</html>
这篇关于如何在同一页面上显示多个Google自定义搜索字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
