为移动网站设计 Google 翻译小部件

Question

我的网站 - www.forex-central.net - 在每个页面的右上角都有 Google 翻译下拉小部件。

唯一的问题是它对我的网站来说有点太宽了（5 厘米），我需要一个 4 厘米的版本（我在其他网站上看到过，所以我知道这是可能的）......但我不知道如何调整代码。

Google 为我使用的小部件提供的代码是：

<script type="text/javascript">function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'en', gaTrack: true, layout: google.translate.TranslateElement.InlineLayout.SIMPLE }, 'google_translate_element');}</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> 

任何帮助将不胜感激！我有点新手，已经搜索了几个小时，但没有得到任何地方：-/

Answer 1

这样的事情会让你开始：

.goog-te-menu-frame {
    max-width:100% !important; //or whatever width you want
}

但是，您还需要执行以下操作：

.goog-te-menu2 { //the element that contains the table of options
    max-width: 100% !important;
    overflow: scroll !important;
    box-sizing:border-box !important; //fixes a padding issue
    height:auto !important; //gets rid of vertical scroll caused by box-sizing
}

但第二部分实际上无法完成，因为翻译界面作为 iframe 包含在您的页面中。好在它没有自己的域，所以我们可以通过Javascript访问它like this：

$('.goog-te-menu-frame').contents().find('.goog-te-menu2').css(
    {
        'max-width':'100%',
        'overflow':'scroll',
        'box-sizing':'border-box',
        'height':'auto'
    }
)

但是那个在元素实际存在（它被异步加载）之前不会起作用，所以我们必须将它包装在something that I got here中。把它们放在一起，你会得到这个：

function changeGoogleStyles() {
    if($('.goog-te-menu-frame').contents().find('.goog-te-menu2').length) {
        $('.goog-te-menu-frame').contents().find('.goog-te-menu2').css(
            {
                'max-width':'100%',
                'overflow':'scroll',
                'box-sizing':'border-box',
                'height':'auto'
            }
        )
    } else {
        setTimeout(changeGoogleStyles, 50);
    }
}
changeGoogleStyles();

哇哦。

您可以使用相同的策略将其他样式应用于翻译框，或者更改表格样式以使其垂直流动而不是水平滚动到屏幕外，无论如何。 See this answer.

编辑：

即使 这个 也不起作用，因为 Google 会在您每次点击下拉菜单时重新应用样式。在这种情况下，我们尝试更改 height 和 box-sizing，但 Google 重新应用了这些，而 overflow 和 max-width 仍然有效。我们需要的是把我们的样式放在它们不会被覆盖的地方并添加!importants [cringes]。内联样式可以解决问题（为了简洁起见，我还用一个变量替换了我们的选择器，这可能对性能的提升可以忽略不计）：

function changeGoogleStyles() {
    if(($goog = $('.goog-te-menu-frame').contents().find('body')).length) {
        var stylesHtml = '<style>'+
            '.goog-te-menu2 {'+
                'max-width:100% !important;'+
                'overflow:scroll !important;'+
                'box-sizing:border-box !important;'+
                'height:auto !important;'+
            '}'+
        '</style>';
        $goog.prepend(stylesHtml);
    } else {
        setTimeout(changeGoogleStyles, 50);
    }
}
changeGoogleStyles();

Answer 2

Google 翻译小部件创建一个 iframe，其中包含来自另一个域的内容（来自 Google 服务器的多个文件）。我们将不得不操纵 iframe 中的内容，但这种所谓的跨站点脚本对我不起作用。我找到了另一个解决方案。我下载了小部件使用的众多文件中的两个，因此我可以编辑它们。

请注意，Google 可以随时更改其 API。黑客将不得不适应。

先决条件：
我假设该小部件正在您的网站上运行。您只想将其安装在较小的屏幕上。我的初始代码如下所示：

<div id="google_translate_element"></div>
<script type="text/javascript">
    function googleTranslateElementInit()
    {
        new google.translate.TranslateElement({pageLanguage:'de', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
    }
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

如果您的初始代码看起来不同，您可能需要相应地调整您的解决方案。

使用的特殊工具：
Chrome DevTools（适配其他浏览器）

程序：

1. 在 Google Chrome 中，右键单击包含 Google 翻译小部件的页面。
2. 点击检查。将出现一个窗口或侧窗格，其中包含大量 HTML 信息。
3. 在第一行，选择来源标签。

4. 浏览源代码树到

   /top/translate.google.com/translate_a/element.js?cb=googleTranslateElementInit
   

5. 单击树中的文件。将显示文件内容。

6. 在element.js的代码窗口下，有一个带有两个大括号{}的小按钮。点击这个。它将对代码进行排序以提高可读性。在接下来的步骤中，我们将需要这种可读性。

7. 在element.js 代码内单击鼠标右键> 另存为...。在我的情况下，将文件保存在您网站的文件层次结构中：

   /framework/google-translate-widget/element.js
   

8. 将您的 <script> 标签指向本地 element.js。

   <!--<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>-->
       <script type="text/javascript" src="../framework/google-translate-widget/element.js?cb=googleTranslateElementInit"></script>
   

9. 从现在开始，您的网站应该从其本地目录加载element.js。现在是检查您的 Google 翻译小部件是否仍然有效的好时机。还要检查浏览器从（Google 服务器或本地目录）获取文件的 Chrome DevTools。它应该位于

   下的源代码树中

   /top/[your domain or IP]/framework/google-translate-widget/element.js?cb=googleTranslateElementInit
   

10. 我们需要来自 Google 服务器的另一个文件。浏览源代码树到

    /top/translate.googleapis.com/translate_static/css/translateelement.css
    

    点击大括号{ }后下载此文件。我将它保存在我的网站文件目录中

    /framework/google-translate-widget/translateelement.css
    

11. 在您的网站文件目录中，打开 element.js 并更改第 66 行：

    //c._ps = b + '/translate_static/css/translateelement.css';
    c._ps = '/framework/google-translate-widget/translateelement.css';
    

    从现在开始，您的网站还将从其本地目录加载translateelement.css。立即检查。

12. 打开你本地的translateeleent.css，并在末尾添加以下样式：

    /* Make all languages visible on small screens. */
    .goog-te-menu2 {
        width: 300px!important;
        height: 300px!important;
        overflow: auto!important;
    }
    .goog-te-menu2 table,
    .goog-te-menu2 table tbody,
    .goog-te-menu2 table tbody tr {
        width: 100%!important;
        height: 100%!important;
    }
    .goog-te-menu2 table tbody tr td {
        width: 100%!important;
        display: block!important;
    }
    .goog-te-menu2 table tbody tr td .goog-te-menu2-colpad {
        visibility: none!important;
    }
    

    我借用了另一个答案的代码：Google translate widget mobile overflow

13. 几何现在可以工作了，但我们破坏了另一件事。显示“Select Language”、“Sélectionner une langue”的小部件文本，或任何用您的语言显示的内容，现在已锁定为该语言。由于您希望您的其他语言读者理解该报价，因此该小部件应适应他们的语言，因为它在我们破解之前曾经工作过。此外，列出的语言名称也会受到影响。这个错误的原因可以在文件element.js 中找到，该文件是根据我们浏览器的语言设置静默定制的。在第 51 和 69 行查看 element.js

    c._cl = 'fr';
    

    _loadJs(b + '/translate_static/js/element/main_fr.js');
    

    在我的例子中，它被设置为法语 (fr)。

    修正第 51 行很简单

    c._cl = 'auto'; //'fr';
    

14. 第 61 行比较棘手，因为没有可用的“自动”值。 Google 服务器上有一个文件main.js（没有 _fr 结尾），它提供英语作为后备，但我们更喜欢用户的语言。查看文件

    /top/translate.googleapis.com/translate_a/l?client=…
    

    它包含两个对象。 sl 和 tl 表示支持翻译的源语言和目标语言。我们必须检查用户的浏览器是否设置为目标语言之一。为此有一个 JavaScript 常量 navigator.language。

15. 在第 69 行编辑 element.js：

    // determine browser language to display Google Translate widget in that language
    var nl = navigator.language;
    var tl = ["af","sq","am","ar","hy","az","eu","bn","my","bs","bg","ceb","ny",
              "zh-TW","zh-CN","da","de","en","eo","et","tl","fi","fr","fy","gl",
              "ka","el","gu","ht","ha","haw","iw","hi","hmn","ig","id","ga","is",
              "it","ja","jw","yi","kn","kk","ca","km","rw","ky","ko","co","hr",
              "ku","lo","la","lv","lt","lb","mg","ml","ms","mt","mi","mr","mk",
              "mn","ne","nl","no","or","ps","fa","pl","pt","pa","ro","ru","sm",
              "gd","sv","sr","st","sn","sd","si","sk","sl","so","es","sw","su",
              "tg","ta","tt","te","th","cs","tr","tk","ug","uk","hu","ur","uz",
              "vi","cy","be","xh","yo","zu"];
    var gl = "";
    if( tl.includes( nl )) gl = '_'+nl;
    else
    {
        nl = nl.substring(0, 3);
        if( tl.includes( nl)) gl = '_'+nl;
        else
        {
            nl = nl.substring(0, 2);
            if( tl.includes( nl)) gl = '_'+nl;
            else gl = '';
        }
    }
    _loadJs(b + '/translate_static/js/element/main'+gl+'.js');
    //_loadJs(b + '/translate_static/js/element/main_fr.js');
    

……应该可以解决问题。

Answer 3

尝试在你的 CSS 中使用它

 .pac-container, .pac-item { width: 100px !important;}

您可以通过更改“100px”值来更改下拉菜单的 with。

这应该可行。如果没有，请告诉我，我再看看。