如何加载谷歌自定义搜索onclick

Question

这可能是一个愚蠢的问题，但我是 javascript 的新手......

我有一个使用谷歌自定义搜索 (V2) 的静态网站。谷歌提供的脚本是异步加载的，这很好，但一天只有几个搜索，所以我正在寻找一种解决方案，只有在用户点击搜索表单时才加载自定义搜索“东西”，以获得更快的页面加载。

我使用了两个单独的 div，一个用于搜索框（隐藏在 div 上以创建我的自定义样式），一个用于搜索结果（弹出布局）。

<div class="hide-search">
    <div class="gcse-searchbox-only"></div> 
</div>
<form id="GOOGLE ID">
    <input value="GOOGLE ID" name="cx" type="hidden" />
    <input value="FORID:11" name="cof" type="hidden"/>
    <div class="column-twelve">
        <input id="q" name="q" type="text" />
    </div>
    <div class="column-twelve">
        <button type="submit" class="button mini">Search</button>
    </div>  
</form>

在页面后面

<div class="gcse-searchresults-only"></div>

在关闭body标签之前，我添加了以下谷歌提供的代码

<script>
(function() {
var cx = 'GOOGLE 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>

该网站也使用 jquery。

有没有办法仅在（以及何时）用户点击搜索字段时才加载脚本？我希望向我的用户提供此搜索服务，但仅限于必要时且不会影响页面加载速度。

提前致谢。

更新：

使用 jquery 和 php 解决的问题。我使用的 Google 自定义搜索脚本会重新加载页面并添加一些 GET 变量。

这是一个丑陋的解决方案，但我将 google 脚本移动到外部 .js 文件并将此代码添加到页面中：

<?php
if(isset($_GET['cx']))
echo "
<script>
$.getScript( '../template/js/g-search.js'); 
</script>
";
else echo"
<script>
$('#q').click(function(){
$.getScript( '../template/js/g-search.js');
})
</script>
";
?>

这样，如果用户第一次访问该页面，只有在他点击表单输入时才会加载脚本，从而加快页面加载速度。如果单击搜索按钮后页面重新加载，则脚本会自动加载并且一切正常。

糟糕的解决方案，但至少是一个解决方案！

Answer 1

这个网站有一个脚本可以根据需求加载脚本http://jmperezperez.com/ondemand-javascript-lazy-loading-stubs/