多个 GCSE 一次在页面上。答案

【问题标题】：Multiple GCSE's on page at one time.多个 GCSE 一次在页面上。
【发布时间】：2015-10-12 17:59:27
【问题描述】：

像这样使用新的 GCSE 代码：

                    // google custom search engine for the whole site
                (function() {
                    var cx = '*****************';
                    var gcse = document.createElement('script');
                    gcse.type = 'text/javascript';
                    gcse.async = true;
                    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
                            '//cse.google.com/cse.js?cx=' + cx + '&gname=sitesearch';
                    var s = document.getElementsByTagName('script')[0];
                    s.parentNode.insertBefore(gcse, s);
                })();

和这样的元素：

            <gcse:searchbox gname="sitesearch"></gcse:searchbox>
            <gcse:searchresults gname="sitesearch"></gcse:searchresults>

如何在页面上包含第二个 gcse 标记并为其分配一个新的 CX：我已经尝试将每个 gname 传递给 url，如下所示：

'//cse.google.com/cse.js?cx=' + cx + '&gname=sitesearch';

但无济于事... 我已经阅读了它所说的文档；

（可选）CSE 元素对象的名称。名称用于按名称检索关联的组件，或将搜索框组件与搜索结果组件配对。如果未提供，自定义搜索将根据网页上组件的顺序自动生成一个 gname。例如，第一个未命名的 searchbox-only 的 gname 为“searchbox-only0”，第二个的 gname 为“seachbox-only1”，以此类推。请注意，为两列布局中的组件自动生成的 gname 将是两列。以下示例使用 gname storesearch 将搜索框组件与 searchresults 组件链接：这使得将搜索框分配给搜索结果变得很容易我似乎无法将 cx 代码附加到实际标签。

我读过这个： Multiple Google CSE (Custom Search Engine) Boxes on Same Page 但那是指较旧版本的GCSE 而这个接受的答案是使用 iframe： How to have multiple Google Custom Search field on the same page

使用 iframe 看起来很笨拙，而且不是正确的方法...... ?

【问题讨论】：

标签： google-custom-search

【解决方案1】：

使用自定义搜索元素 v1 可以相对容易地完成：

<script src='//www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load('search', '1', {style: google.loader.themes.V2_DEFAULT});
google.setOnLoadCallback(function () {
  new google.search.CustomSearchControl('CSE_USER_ID:CDE_ID1').draw('cse');
  new google.search.CustomSearchControl('CSE_USER_ID:CDE_ID2').draw('cse2');
});
</script>

<div id='cse' style="width: 100%;">Loading</div>

<div id='cse2' style="width: 100%;">Loading</div>

演示：同一页面上的多个 Google CSE
http://box.galeksic.com/cse.multiple-on-same-page/

JavaScript API 参考 (v1)
https://developers.google.com/custom-search/docs/js/cselement-reference

我尝试过使用 v2，但不是很成功。

【讨论】：

是的，这行不通吗：D .... 所以 Iframe 是唯一的方法，然后看起来...

【解决方案2】：

我在同样的问题上苦苦挣扎，在谷歌产品论坛上遇到了this post。

基本上，答案是使用单个 CSE 并使用 refinements 区分您正在搜索的内容，这允许您使用 CSE 设置中的标签来确定搜索的 URL 范围。

注意：确保将优化设置为“仅搜索具有此标签的网站”，假设这是您想要的。

然后，在您的 HTML 代码中，指定您希望对每个结果框使用的默认优化，如下所示：

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

<gcse:searchresults-only defaultToRefinement="refinement-tag-1"></gcse:searchresults-only>

<gcse:searchresults-only defaultToRefinement="refinement-tag-2"></gcse:searchresults-only>

为了我的使用，我不想显示默认的优化选项卡（并且让两个结果框看起来像是独立的），所以我使用 CSS 来隐藏“gsc-tabsArea”元素。

More info on v2 CSE API and refinements...

这是一个有效的代码笔：http://codepen.io/mikedaul/pen/xqxYOO?q=flowers

希望这会有所帮助！

【讨论】：