2010-09-27 43 views
0

我正在使用简单的Google API来显示搜索结果。我想获得鼠标悬停或点击链接的href值。 javascript的味道真的不重要,我只需要获得用户选择的href值就可以了。如何使用jquery获取Google搜索API结果href值

(我需要这个,因为我有一个Web服务,它允许用户保存他们找到感兴趣的链接。)

我在客户端脚本太可怕了,所以我真的可以用一只手。以这里的示例为例,我使用默认的Google AJAX Search API示例。

To visually explain I have posted this image.(不能附加)

我已经使用了链接 - How to get href value using jQuery? - 简单参考无济于事。我相信这是由于显示谷歌搜索结果的方式/页面渲染顺序。

HTML源代码预渲染如下:

<!-- 
    copyright (c) 2009 Google inc. 
    You are free to copy and use this sample. 
    License can be found here: code.google.com/apis/ajaxsearch/faq/#license 
--> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>Google AJAX Search API Sample</title> 
    <script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script> 
    <script type="text/javascript"> 
    /* 
    * How to do a search that returns the max number of results per page. 
    */ 
    google.load('search', '1'); 
    function OnLoad() { 

     // create a search control 
     var searchControl = new google.search.SearchControl(); 

     // Set the Search Control to get the most number of results 
     searchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET); 

     // Create 2 searchers and add them to the control 
     searchControl.addSearcher(new google.search.WebSearch()); 
     searchControl.addSearcher(new google.search.BlogSearch()); 

     // Set the options to draw the control in tabbed mode 
     var drawOptions = new google.search.DrawOptions(); 
     drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED); 

     // Draw the control onto the page 
     searchControl.draw(document.getElementById("content"), drawOptions); 

     // Search! 
     searchControl.execute("Subaru STI"); 
    } 
    google.setOnLoadCallback(OnLoad); 

    </script> 

    </head> 
    <body style="font-family: Arial;border: 0 none;"> 

    <div id="content">Loading...</div> 

    </body> 
</html> 

The relevent rendered result html source is as follows: 


    <div class="gs-webResult gs-result"> 
         <div class="gs-title"> 
          <a class="gs-title" href="http://en.wikipedia.org/wiki/Subaru_Impreza_WRX_STI" target="_blank"> 
          <b>Subaru</b> Impreza WRX <b>STI</b> - Wikipedia, the free encyclopedia</a></div> 

如果任何人都可以点我在正确的方向,我真的很感激。 感谢百万,戴夫

回答

0

我不太确定你使用的谷歌库 - 从我可以从快速搜索中可以看出它似乎被弃用。您可能想要链接到您从中获取样本的位置。

如果你只是想提取的clickmouseoverhref,你可以这样做:

$('a.gs-title').live('click', function(e){ 
     e.preventDefault(); 
     console.log('clicked', $(this).attr('href')); 
    }); 

这使用jQuery的live()事件处理这个点击处理程序附加到具有一流的每<a>元素gs-title ,即使稍后将其添加到页面(要在mouseover上执行此操作,只需将第一个参数更改为mouseover而不是click)。处理程序本身不会做任何事情,但会阻止默认的点击操作(因此您会发现链接不起作用)并将href记录到控制台。您可以根据您的要求进行调整。

+0

谢谢。我结束了使用silverlight渲染输出。您的示例适用于使用Jquery的折旧Google api。 – DaveCS 2011-03-22 03:45:35

+0

很确定'live'函数已被弃用。 IIRC,它通过一个额外的参数被集成到'on'中。 – Carcigenicate 2016-02-25 18:49:34

0

我已经使用了两个文件。

ajax.html

<html> 
<head> 
    <style> 
    #container 
    { 
    border:1px solid black; 
    height: 20px; 
    width: 230px; 
    background: #5CCCCC; 
    position: absolute; 
    color: white; 
    display: none; 

    } 
    </style> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
    </script> 
    </head> 
    <body> 
    <p>hello how are you?</p> 
    <p>Please run this file with localhost url only else it won't work</p> 
    <p>you can double click at any word to get the no of results</p> 
    <div id="container"></div> 

    <script> 
     var p = $('p'); 
     p.html(function(index, oldHtml) { 
     return oldHtml.replace(/\b(\w+?)\b/g, '<span class="word">$1</span>') 
     }); 
     p.click(function(event) { 
     var x=event.pageX; 
     var y=event.pageY; 
     $("#container").css(
     { 
     "top":y+"px", 
     "left":x+"px" 

     }).fadeIn(500); 
     $("#container").text("Loading...."); 
     var a=event.target.innerHTML; 
     $("#container").load("index.php?str="+a+" #resultStats"); //Since number of results are saved in a id named resultStats,using that to filter the content.from google page. 
     }); 
    </script> 
</body> 
</html> 

而另一个文件是有我查验谷歌服务器获取总结果数的PHP文件。

的index.php:

<?php 
    $str_to_search=$_REQUEST['str']; 
    $a=file_get_contents("http://www.google.com/search?q=define+". $str_to_search); 
    echo $a; 
?> 

记住通过PHP服务器上运行这两个文件。

相关问题