Wie bekomme ich, was Benutzer auf die Suchergebnisseite klicken?

Question

Ich erstelle ein reaktives Projekt und benutze die Google Suchmaschine, um Nutzern zu erlauben, auf meiner Seite nach Google zu suchen. Aber ich weiß nicht, wie man auf die Suchergebnisseite klickt. Unten ist mein Quellcode:

componentDidMount() { 
    const myCallback = function() { 
     if (document.readyState === 'complete') { 
     google.search.cse.element.render(
      { 
      div: 'root', 
      tag: 'search', 
      }); 
     } else { 
     google.setOnLoadCallback(() => { 
      google.search.cse.element.render(
      { 
       div: 'root', 
       tag: 'search', 
      }); 
     }, true); 
     } 
    }; 

    window.__gcse = { 
     parsetags: 'explicit', 
     callback: myCallback, 
    }; 

    (function() { 
     const cx = '015923670062127816633:npuitytcpqy'; 
     const gcse = document.createElement('script'); 
     gcse.type = 'text/javascript'; 
     gcse.async = true; 
     gcse.src = `https://cse.google.com/cse.js?cx=${cx}&searchType=image`; 
     // gcse.src = `https://www.googleapis.com/customsearch/v1?key=YOUR_API_KEY&cx=${cs}&q=flower&searchType=image&fileType=jpg&imgSize=small&alt=json`; 
     const s = document.getElementsByTagName('script')[0]; 
     s.parentNode.insertBefore(gcse, s); 
    }()); 
    console.log(window.__gcse); 
    } 

    render() { 
    return (<div className="content"> 
     <div className="gcse-searchbox" resultsUrl="http://www.google.com" newWindow="true" queryParameterName="search" /> 
    </div>); 
    } 

Benutzer auf dem Suchfeld und es wird die Suchergebnisse in einem Popup-Dialog angezeigt. Wenn Benutzer auf eines der Suchergebnisse klicken, wird ein neues Browser-Tag geöffnet. Jetzt möchte ich verhindern, dass ich einen neuen Tab öffne, stattdessen bekomme ich was Nutzer angeklickt haben und mache etwas auf meiner Seite. Wenn Benutzer beispielsweise auf ein Bild klicken, möchte ich den Bildlink erhalten und dieses Bild auf meiner Komponente rendern. Wie kann ich es durch Reagieren implementieren?

Answer 1

Besuchen Sie zuerst die Google Custom Search-Systemsteuerung. Nachdem Sie die relevante Suchmaschine ausgewählt haben, klicken Sie auf Look and feel. Stellen Sie sicher, dass die Layout Registerkarte ausgewählt ist, und wählen Sie die Full-Breite Layout (oder vielleicht eine der anderen, je nachdem, wie genau es auf Ihrer Seite aussehen soll). Schließlich, klicken Sie auf Speichern & Holen Sie Code und verwenden Sie den Code, den es bietet.