Question

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

我有一个使用谷歌自定义搜索（V2）的静态网站。 Google提供的脚本是异步加载的，这很好，但每天只进行一些搜索，所以我正在寻找一种解决方案来加载自定义搜索“东西”，只有当用户点击搜索表单，才能拥有更快的页面加载。

我正在使用两个单独的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>

在关闭正文标记之前，我添加了Google提供的以下代码

<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/

加载脚本

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

1 个答案: