javascript 如何使用预加载的搜索字符串立即执行 Google 自定义搜索 (V2)？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16849144/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get the Google Custom Search (V2) to execute immediately with a pre-loaded search string?
提问by user2438826
I've been tasked with adding GCS to a website. After I followed the instructions to create my free GCS (http://www.google.com/cse/sitesearch/create), and pasted the supplied snippet into the appropriate place, the search box & button components render OK and the user is able to enter a search string, run the search and see the results. So far so good.
我的任务是将 GCS 添加到网站。在我按照说明创建我的免费 GCS ( http://www.google.com/cse/sitesearch/create) 并将提供的代码段粘贴到适当的位置后，搜索框和按钮组件呈现正常，用户是能够输入搜索字符串，运行搜索并查看结果。到现在为止还挺好。
However, when the components render for the first time I want to be able to pass a pre-entered string into the box and programmatically have the search executed immediately. This bit is not working.
但是，当组件第一次呈现时，我希望能够将预先输入的字符串传递到框中并以编程方式立即执行搜索。这一点不起作用。
The code I currently have in place is as follows, consisting of the supplied snippet plus some extra code derived from my reading of the Custom Search Element Control API doc (https://developers.google.com/custom-search/docs/element) and intended to implement the 'execute immediate':
我目前拥有的代码如下，由提供的代码段以及从我阅读自定义搜索元素控件 API 文档（https://developers.google.com/custom-search/docs/element）中得出的一些额外代码组成) 并打算实施“立即执行”：
<div class="content-container">
<script type="text/javascript">
(function() {
var cx = '(my search id)';
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> gname="2DSearch"</gcse:search>
<script type="text/javascript">
var element = google.search.cse.element.getElement("2DSearch");
element.prefillQuery(primarySearch);
element.execute(primarySearch);
</script>
</div>
primarySearch is the string I want to automatically search on. When the components render, the string 'gname="2DSearch"' appears briefly then disappears again just before the search components appear, then nothing else happens.
primarySearch 是我想自动搜索的字符串。当组件呈现时，字符串 'gname="2DSearch"' 在搜索组件出现之前短暂出现然后再次消失，然后没有其他任何事情发生。
There appear to be some similarities here with this question (unanswered): https://stackoverflow.com/questions/15871911/passing-optional-search-parameters-into-google-custom-search-query
这个问题似乎有一些相似之处（未回答）：https: //stackoverflow.com/questions/15871911/passing-optional-search-parameters-into-google-custom-search-query
I have searched the Web in vain for a number of hours for anything else relevant.
我已经在网上搜索了几个小时，但没有找到任何相关的内容。
Can anybody tell me why it's not working and/or what I need to do?
谁能告诉我为什么它不起作用和/或我需要做什么？
My apologies, I have done alot of programmming but am virtually illiterate when it comes to HTML & javascript. Thanks Jim
我很抱歉，我已经做了很多编程，但在 HTML 和 javascript 方面我几乎不识字。谢谢吉姆
I discovered that the Chrome console is showing the following error: Uncaught ReferenceError: google is not defined
我发现 Chrome 控制台显示以下错误：Uncaught ReferenceError: google is not defined
My code now looks like this:
我的代码现在看起来像这样：
<div class="content-container">
<script type="text/javascript">
(function() {
var cx = '013736134253840884188:fxsx6zqql_y';
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>
</div>
<div class="gcse-search" data-gname="2DSearch"></div>
<div class="content-container">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
var element = google.search.cse.element.getElement("2DSearch");
element.prefillQuery(primarySearch);
element.execute(primarySearch);
</script>
</div>
In the console again I'm now also seeing the following:
再次在控制台中，我现在还看到以下内容：
XMLHttpRequest cannot load (insert here the jsapi link above that I'm not allowed to post). Origin (insert here the URL for my localhost) is not allowed by Access-Control-Allow-Origin.
XMLHttpRequest 无法加载（在此处插入上面我不允许发布的 jsapi 链接）。Access-Control-Allow-Origin 不允许 Origin（在此处插入我的本地主机的 URL）。
There are numerous references to similar errors to this all over the Net, each one slightly different, with solutions proposed referring to JSON, JQUERY, AJAX etc.etc., but nothing that I have found seems directly relevant to what I am trying to do (ie make available to my code the file or library in which 'google' is defined), and nothing that I have tried has worked.
网络上有很多类似错误的引用，每一个都略有不同，提出的解决方案是指 JSON、JQUERY、AJAX 等，但我发现的任何内容似乎都与我想要做的事情没有直接关系（即，让我的代码可以使用定义了“google”的文件或库），并且我尝试过的任何方法都没有奏效。
Talk about trying to find your way through a coalmine with a candle... :) Cheers
谈论试图用蜡烛在煤矿中找到路...... :) 干杯
回答by Arne de Bruijn
I've got it working with the gcse callback option (I also changed my layout in the CSE Control Panel to prevent the default overlay).
我已经让它与 gcse 回调选项一起工作（我还在 CSE 控制面板中更改了我的布局以防止默认覆盖）。
<script>
function gcseCallback() {
if (document.readyState != 'complete')
return google.setOnLoadCallback(gcseCallback, true);
google.search.cse.element.render({gname:'gsearch', div:'results', tag:'searchresults-only', attributes:{linkTarget:''}});
var element = google.search.cse.element.getElement('gsearch');
element.execute('this is my query');
};
window.__gcse = {
parsetags: 'explicit',
callback: gcseCallback
};
(function() {
var cx = 'YOUR_ENGINE_ID';
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>
<div id="results"></div>
回答by Kai Noack
Can you pass the search term via the URL?
你能通过 URL 传递搜索词吗？
<script>
(function() {
var cx = 'YOURID';
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:searchbox queryParameterName="term"></gcse:searchbox>
<gcse:searchresults></gcse:searchresults>
If you call your "search" page via yourdomain.com/search?term=searchwordthe search results appear immediately.
如果您调用您的“搜索”页面yourdomain.com/search?term=searchword，搜索结果会立即出现。
回答by Alexey
<gcse:search gname='abcd'></gcse:search>
And when the page loaded:
当页面加载时：
google.search.cse.element.getElement('abcd').execute(query);
