如何在 React App 中嵌入 Google 自定义搜索?

2024-03-04

我需要在 React 应用程序中嵌入 JS 小部件。有办法做到吗?

JS 小部件是 Google 自定义搜索:

  (function() {
    var cx = '111:xxx';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
<gcse:search></gcse:search>

use componentDidMount

componentDidMount() {
  (function() {
    var cx = '111:xxx';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
}

and use

<div class="gcse-searchbox" data-resultsUrl="http://www.example.com"
data-newWindow="true" data-queryParameterName="search" />`

代替<gcse:search></gcse:search>根据文档 https://developers.google.com/custom-search/docs/element#html5

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 React App 中嵌入 Google 自定义搜索? 的相关文章

  • 仅当表单已提交时才触发 jQuery 表单验证?

    不引人注目的验证基于这样的想法 don t进行表单验证 直到用户提交表单 一旦发生这种情况 如果表单上的某些内容无效 那么一旦用户更改了每个字段 就会立即验证它 我想做的是 不显眼地 触发表单元素的验证 也就是说 only如果用户已尝试提交
  • 使用 React.lazy 时未捕获未定义的错误

    我正在尝试实施基于路由的代码分割 https reactjs org docs code splitting html route based code splitting正如 React 文档中提到的 这是添加延迟实现之前我的应用程序 这
  • 如何使用 JavaScript 中的值填充下拉列表?

    我在 Tridion CMS 扩展中的功能区工具栏按钮中添加了一个按钮 单击该按钮后 将显示一个弹出页面 其中包含两个下拉菜单 通过更改第一个下拉控件中的值 我应该填充第二个下拉控件的值 就我而言 我正在使用ASP drop down li
  • 如何仅在 NextJS 站点构建期间使用 getInitialProps?

    当使用 NextJS 构建静态站点时 我想要getInitialProps方法仅在构建步骤期间触发 而不是在客户端上触发 在构建步骤中 NextJS 运行getInitialProps 方法 https nextjs org docs fe
  • 如何使用canvas.toDataURL()将画布保存为图像?

    我目前正在构建一个 HTML5 Web 应用程序 Phonegap 本机应用程序 我似乎不知道如何将画布保存为图像canvas toDataURL 有人可以帮我吗 这是代码 有什么问题吗 我的画布被命名为 canvasSignature J
  • Ember.js 处理 View 事件后转换到路由

    Setup 我有一个 Ember 应用程序 支持使用 Imgur API 上传图像 我已经有一个工作路线和模板来处理任何 Imgur ID 但我想在上传新图像后转换到此路线 使用返回的 Imgur ID 这是该应用程序的相关部分 http
  • 检查 touchend 是否在拖动后出现

    我有一些代码可以更改表的类 在手机上 有时表格对于屏幕来说太宽 用户将拖动 滚动来查看内容 但是 当他们触摸并拖动表格时 每次拖动都会触发 touchend 如何测试触摸端是否是触摸拖动的结果 我尝试跟踪dragstart和dragend
  • HTML2canvas 和 Canvas2image,下载的屏幕截图不显示我的 HTML 图像

    我一直在开发一个 HTML 页面 我想将其转换为图像 我一直在使用 html2canvas 和 canvas2image 脚本并采用此代码http jsfiddle net 8ypxW 3 http jsfiddle net 8ypxW 3
  • 通过 node-http-proxy 保留基于 cookie 的会话

    我有一个简单的基于 Express 的 Node js Web 服务器 用于开发 JavaScript 应用程序 我将服务器设置为使用 node http proxy 来代理应用程序向在不同域和端口上运行的 Jetty 服务器发出的 API
  • 如果链接包含特定文本,jQuery 将类添加到 href

    我的网站上的列表中有一些动态填充的链接 这些链接链接到文件 是否可以使用 jQuery 查看文件名是否以 pdf 结尾 并在 href 或类似的链接文本以 mp3 结尾时添加一个类 例如 我的列表中有以下链接 文件1 pdf 歌曲1 mp3
  • 在d3.js中将2D形状转换为3D,并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程
  • 淡出和循环一组 div 的最佳方式

    假设我有以下 div div class a You are funny div div class b You are smart div div class c You are cool div 最好的展示方式是什么div a持续 5
  • 将 javascript 整数转换为字节数组并返回

    function intFromBytes x var val 0 for var i 0 i lt x length i val x i if i lt x length 1 val val lt lt 8 return val func
  • 当用户单击链接时,如何记录 MixPanel 事件?

    当用户单击某种类型的链接时 我试图在 MixPanel 中记录一个事件 我正在使用 JQuery 不引人注意地完成此操作 据我所知 我需要添加一个回调函数 以便在记录事件后将用户带到 URL 这是我正在使用的代码 不幸的是
  • 如果数字小于 10,则显示前导零 [重复]

    这个问题在这里已经有答案了 可能的重复 JavaScript 相当于 printf string format https stackoverflow com questions 610406 javascript equivalent t
  • 如何将函数内的捕获错误传递给父级

    我有这几行代码示例 想知道下面的逻辑到底如何 try var response child console log why here catch err console log should show this err function c
  • 如何获取 UIWebView 中元素的位置?

    我在 iPad 程序中加载了 html 的 UIWebView 通过使用 webkit column width 我将 html 分为几列 padding 0px height 1024px webkit column gap 0px we
  • 如何在打字稿文件中导入没有定义文件的js库

    随着我们的项目变得越来越大 我想从 JavaScript 切换到 TypeScript 以帮助进行代码管理 然而 我们使用许多库作为 amd 模块 我们不想将其转换为 TypeScript 我们仍然想将它们导入 TypeScript 文件
  • 用于 C# XNA 的 Javascript(或类似)游戏脚本

    最近我准备用 XNA C 开发另一个游戏 上次我在 XNA C 中开发游戏时 遇到了必须向游戏中添加地图和可自定义数据的问题 每次我想添加新内容或更改游戏角色的某些值或其他内容时 我都必须重建整个游戏或其他内容 这可能需要相当长的时间 有没
  • 在 GWT 中,在任何主机页标记上添加事件处理程序

    我想为任何标签添加 MouseOver 事件处理程序 举个例子 我想为旧版 HTML 页面中的每个锚点页面添加事件处理程序 继GWT指南 http code google com webtoolkit doc 1 6 DevGuideUse

随机推荐

  • Spark:如何通过mapInPandas正确转换数据帧

    我正在尝试通过最新的 Spark 3 0 1 函数转换具有 10k 行的 Spark 数据框地图熊猫 https spark apache org docs latest sql pyspark pandas with arrow html
  • 如何在 Rust 中连接静态字符串

    我正在尝试连接静态字符串和字符串文字来构建另一个静态字符串 以下是我能想到的最好的方法 但它不起作用 const DESCRIPTION static str my program const VERSION static str env
  • 将两个 div 粘贴到另一个 div 上

    这就是我想要实现的目标 我有3个div 我们称它们为左中和右 中心 div 的宽度是动态的 它可以是 100px 200px 等 具体取决于中心 div 所保存的图像 如何做到无论中心 div 大小如何 左侧和右侧 div 都粘在中心 di
  • 使用 Javascript/JQuery/Rails 3 动态添加新行

    我正在构建一个时间表表单 其中包含一个日历 使用户能够选择指定的日期并搜索项目 我有这个功能 我基本上拥有的是这样的 一旦用户搜索他们的项目并按加号按钮 即指定的项目 在本例中是 Asda 用户然后单击加号图标 这将创建一个新行并将其放入
  • Android 上的多选 ListPreference

    关于在 Android 上实现多选 复选框 ListPreference 有什么想法吗 我必须扩展 ListPreference 吗 是否已经记录了任何类来执行此操作 Thanks 多选 ListPreference 现在从 API 级别
  • 在 Rails 中实现“无尽页面”的最佳方法?

    分页太烂了 用户应该能够永远向下滚动 在适当的时候自动拉入新内容 有一个体面的导轨铸造 http railscasts com episodes 114 endless page关于这一点 但 Ryan 承认他的解决方案在 IE 中不起作用
  • 无法访问 xamarin 表单项目中的已处置对象异常

    我正在开发 Xamarin Forms 表单版本 2 3 4 231 项目 该应用程序在 iOS 中运行良好 而在 Android 中则随机崩溃 从崩溃日志来看 这似乎是内部崩溃 但我不知道从哪里开始 我知道应用程序中没有足够的信息 但有人
  • 我可以获取视图中当前控制器的名称吗?

    有没有办法从视图中找出当前控制器是什么 举个例子说明为什么我想知道这一点 如果多个控制器共享相同的布局 我可能在布局 ERB 文件中包含一部分 我想在其中突出显示基于控制器的当前页面的菜单项 也许这是一个糟糕的方法 如果是这样 更优选的方法
  • Cloud Firestore Swift:如何删除文档查询

    我想删除我的用户名集合中包含 UID 字段作为当前用户 ID 的所有文档 到目前为止 这是我的代码 let uid Auth auth currentUser uid db collection Usernames whereField U
  • 如何在 Sphinx 文档中将成员注释为抽象?

    以下两个属性定义在 Sphinx 中显示完全相同autodocHTML 输出 property def concrete self This is the concrete docstring pass abstractproperty d
  • cURL NTLM 代理授权

    我已经使用curl有一段时间了 它工作正常 但是使用用户 域 用户名 来验证curl的代理无法请求授权 授权方式为NTLM 该代码位于批处理文件中 Code curl proxy ntlm proxy user proxy PROXY UR
  • 在定义函数之前调用函数(前向引用扩展了变量的定义)

    考虑这个基本的 Scala 示例代码 object Test def main args Array String inner var x Int 5 def inner println x x 尝试编译它会产生以下错误消息 test sc
  • Access 中的 ConcatRelated(),使用两个键

    我找到了 ConcatRelated 函数 http allenbrowne com func concat html 它似乎做了我想要的事情 但我需要输入两个键而不是一个 我的数据如下所示 Chain Store Warehouse Wa
  • 从相机捕获的iphone图像自动旋转Swift

    通过编程方式 我在应用程序中从相机捕获了图像 它已经很好地获取了 但是当我转移到另一个时 查看并忽略那个视图 当时我的图像我想旋转为风景 我用相机拍摄了图像 当我从照片库获取图像时 没有发现问题 下图是我的原图 截屏 https i sta
  • 如何将数据从一个 BigTable 表复制到另一个 BigTable 表

    我正在尝试将数据从一个 Bigtable 表复制到另一个 Bigtable 表 但没有找到任何直接的方法来执行此操作 可以选择将数据从 Bigtable 表复制到 Google Storage 然后从存储文件复制回 Bigtable 但这需
  • API方法排序:Swagger版本3.0.2

    我在用招摇版本3 0 2 http swagger io swagger ui 我也关注了这个答案 https stackoverflow com a 32345035 3006390但对方法顺序没有影响 window onload fun
  • 在 Spark 数据框中创建 StructType 的空列

    我需要将 StructType 的空列添加到现有的 DataFrame 中 尝试以下 df df withColumn features typedLit StructType Nil And df df withColumn featur
  • 对表单集中的每个表单进行重复查询

    在我的 Django 应用程序中 我的用户可以拥有多个职位 即 Position 模型有 User 模型的外键 通过使用 djangomodelformset factory我输出与当前登录用户关联的所有位置 如下所示 视图 py clas
  • 单步执行属性/函数 (F11) 无法按预期工作

    In Visual Studio 2010 the Step Into Property Function F11 doesn t work as expected 它不会进入属性设置器或获取器 我将解决方案转换为Visual Studio
  • 如何在 React App 中嵌入 Google 自定义搜索?

    我需要在 React 应用程序中嵌入 JS 小部件 有办法做到吗 JS 小部件是 Google 自定义搜索 function var cx 111 xxx var gcse document createElement script gcs