如何在同一页面上显示多个Google自定义搜索字段

Dou*_*gui 5 javascript google-custom-search

我正在尝试使用Google自定义搜索(GCS)在同一页面上设置多个搜索字段,如下所示:

<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>
Run Code Online (Sandbox Code Playgroud)

不幸的是,它不起作用.cx每个字段的搜索都是相同的.当它在这个地址上执行ajax请求时:https://www.googleapis.com/customsearch/v1element ...有这个值:&cx=user_id:field_id1两个字段的值相同.

解决办法是什么?

我已经看到了这个问题:同一页面上的多个Google CSE(自定义搜索引擎)框,但似乎是在另一个版本上.

Edu*_*omo 1

尝试使用iFrames

索引.html

<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>
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)