Google 音译建议 CSS 不正确答案

【问题标题】：Google Transliteration Suggestion CSS not properGoogle 音译建议 CSS 不正确
【发布时间】：2019-04-15 06:09:36
【问题描述】：

我按照以下步骤解决了 Transliteration API 无法通过 HTTPS 提供的问题：Javascript google transliterate API not served over https

我将 Google JSAPI 和 Transliteration.I.js 提取到我自己的文件中并添加了 https。

但在那之后，建议会在页面底部的 div 中弹出，而不像通常的下拉菜单。

不胜感激。

【问题讨论】：

【解决方案1】：

这是一个逐步的过程：

首先，有一个 API 链接：

<script type="text/javascript" src="https://www.google.com/jsapi">

其次，访问上面的API链接，搜索如下内容：

google.loader.ServiceBase = 'https://www.google.com/uds';

需要更换google.loader.ServiceBase = 'yourfile.js';的链接

注意：yourfile.js 是您创建的脚本。

为此，您需要创建两个单独的 JavaScript 文件。为什么？因为 google.loader.ServiceBase 在 google.com/jsapi 里面

第 1 步：创建两个 JavaScript 文件 - 比如说 main.js 和 extra.js

第二步：将https://www.google.com/jsapi的内容保存到main.js

第三步：将https://www.google.com/uds/api/elements/1.0/7ded0ef8ee68924d96a6f6b19df266a8/transliteration.I.js的内容保存到extra.js

第 4 步：在 extra.js 中 - 找到 qi="http://www.google.com" 并替换为 qi="https://www.google.com" - 记住 http 已更改为 https 并保存。

第 5 步：现在回到 main.js - 您必须找到 google.loader.ServiceBase = 'https://www.google.com/uds'; 并替换为 google.loader.ServiceBase = 'extra.js'; 并保存。

第 6 步：调用 index.html 中的两个文件。

<script type="text/javascript" src="main.js">
<script type="text/javascript" src="extra.js">

第 7 步：从 link 复制 CSS 并将其添加到文件 transliteration.css。将以下行添加到 index.html

<link type="text/css" href="assets/google/js/transliteration.css" rel="stylesheet"/>

这应该为您提供显示音译弹出窗口所需的正确 CSS。

【讨论】：