Question

我正在创建一个反应项目并使用谷歌搜索引擎允许用户在我的页面中搜索谷歌。但我不知道如何让用户点击搜索结果页面。以下是我的源代码：

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>);
  }

用户可以在搜索框中搜索，它会在弹出的对话框中显示搜索结果。如果用户单击其中一个搜索结果，它将打开一个新的浏览器标记。现在我想阻止打开一个新选项卡，而不是让用户点击并在我的页面中执行某些操作。例如，如果用户单击图像，我想获取图像链接并在我的组件上呈现此图像。我怎样才能通过反应来实现呢？

Answer 1

首先，访问Google自定义搜索控制面板。选择相关搜索引擎后，单击外观。确保选中布局选项卡，然后选择全宽布局（或者可能是其中一个布局，具体取决于您希望它在页面上的显示效果）。最后，点击 Save＆amp;获取代码并使用它提供的代码。

如何获得用户点击搜索引擎结果页面的内容？

1 个答案: