Question

如何在Google Image Search API v2中使用javascript或jQuery点击图片上的图片网址？我在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/

如何在谷歌图片搜索api v2中获取图片网址

1 个答案: