javascript - 如何在Google图像搜索API v2中获取图像URL

Question

如何在 Google Image Search API v2 中使用 javascript 或 jQuery 获取图像点击图像的 url？我在 Google Search API v2 文档中没有找到此信息。请帮我解决这个问题。

<script>

  var renderSearchElement = function() {
   google.search.cse.element.render(
      {
       gname:'gsearch',
       div: "test",
       attributes: {
       disableWebSearch: true,
       enableHistory: true,
       enableImageSearch:true,
       imageSearchResultSetSize:6
       },
       tag: 'search'
      });
      var element = google.search.cse.element.getElement('gsearch');  
      element.execute();
  };
  var myCallback = function() {
    if (document.readyState == 'complete') {
      renderSearchElement();  
    } 
    else {
      google.setOnLoadCallback(renderSearchElement, true);  
    }
  };
  window.__gcse = {
    parsetags: 'explicit',
    callback: myCallback
  };
   (function() {
    var cx = '000888210889775888983:tmhkkjoq81m';
    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>   

Answer 1

您可能希望在图像上有一个监听器，以便在单击它时可以报告 url 值。这意味着您需要使用您自己的版本并附加监听器来覆盖默认的 cse 镜像。

此处描述了用您自己的代码覆盖默认结果模板的过程(其中一些代码已过时，但一般情况有效):https://developers.google.com/custom-search/docs/js/rendering

您只需覆盖缩略图部分即可，例如:

<div id="my_thumbnail">
    <div data-attr="0" data-vars="{tn:(Vars.cseThumbnail && cseThumbnail.src)
        ? cseThumbnail : (
            (Vars.thumbnail && thumbnail.src)
                ? thumbnail : {src:Vars.document && document.thumbnailUrl})}">
      <div data-if="tn.src">
        <a class="gs-image" data-attr="{href:url,target:target}" onclick="alert(this)">
          <img data-if="!tn.width || !tn.height || tn.width >= tn.height * 7 / 5" class="gs-image"
            data-attr="{src:tn.src}"
            onload="if (this.parentNode && this.parentNode.parentNode && this.parentNode.parentNode.parentNode) {
                      this.parentNode.parentNode.parentNode.style.display = '';
                      this.parentNode.parentNode.className = 'gs-image-box gs-web-image-box gs-web-image-box-landscape';
                    }
            "/>
          <img data-elif="true" class="gs-image"
            data-attr="{src:tn.src}"
            onload="if (this.parentNode && this.parentNode.parentNode && this.parentNode.parentNode.parentNode) {
                      this.parentNode.parentNode.parentNode.style.display = '';
                      this.parentNode.parentNode.className = 'gs-image-box gs-web-image-box gs-web-image-box-portrait';
                    }
            "/>
        </a>
      </div>
    </div>
  </div>

请注意 onclick="alert(this)" 部分 - 这是我添加的与默认 cse 模板相比的唯一区别。您可以更改此 onclick 函数，以对 url 执行更智能的操作，而不仅仅是提醒它。这是完整的演示:

http://jsfiddle.net/dhkfZ/