问题
I followed the steps to solve the problem of Transliteration API not being served over HTTPS: Javascript google transliterate API not served over https
I extracted Google JSAPI & Transliteration.I.js to my own file and added https.
But After that, the suggestions pop up in a div at the bottom of the page and not like the usual dropdown.
Would appreciate some help.
回答1:
Here is a step by step process:
First, there's a link to API:
<script type="text/javascript" src="https://www.google.com/jsapi">
Second, Visit the API link above and search the contents as given below:
google.loader.ServiceBase = 'https://www.google.com/uds';
You need to replace the link of google.loader.ServiceBase = 'yourfile.js';
note: yourfile.js is a script created by you.
And to do that - you need to create two separate JavaScript files. Why? because the google.loader.ServiceBase is inside google.com/jsapi
step 1: Create two JavaScript files - lets say main.js and extra.js
step 2: save the contents of https://www.google.com/jsapi to main.js
step 3: save the contents of https://www.google.com/uds/api/elements/1.0/7ded0ef8ee68924d96a6f6b19df266a8/transliteration.I.js to extra.js
step 4: In extra.js - find qi="http://www.google.com" and replace with qi="https://www.google.com" - remember http is changed to https and save it.
step 5: Now back to main.js - you have to find the google.loader.ServiceBase = 'https://www.google.com/uds'; and replace with google.loader.ServiceBase = 'extra.js'; and save it.
step 6: Call both the files in your index.html.
<script type="text/javascript" src="main.js">
<script type="text/javascript" src="extra.js">
step 7: Copy CSS from this link & add it to a file transliteration.css. Add the following line to index.html
<link type="text/css" href="assets/google/js/transliteration.css" rel="stylesheet"/>
This should get you the correct CSS required for showing the transliteration popup.
来源：https://stackoverflow.com/questions/55683386/google-transliteration-suggestion-css-not-proper