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会粘贴。我们需要的是将我们的风格放在他们不会被覆盖的地方并添加!important s [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。然后必须修改该hack。

先决条件：
我认为该小部件正在您的网站上运行。您只想在较小的屏幕上安装它。我的初始代码如下：

<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（适用于其他浏览器）

过程：

在Google Chrome浏览器中，右键单击包含Google Translate小部件的页面。
点击检查。窗口或侧窗格会显示很多HTML信息。
在第一行中，选择来源标签。

浏览源代码树

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

单击树中的文件。将显示文件内容。
在element.js的代码窗口下，有一个带有两个大括号 {} 的小按钮。点击这个。它将对代码进行排序以提高可读性。在接下来的步骤中，我们将需要这种可读性。
在element.js代码内右键单击> 另存为... 。在我的情况下，将文件保存在网站的文件层次结构中：
```
/framework/google-translate-widget/element.js
```

将您的<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>

从现在开始，您的网站应从其本地目录加载element.js。现在是检查您的Google翻译窗口小部件是否仍然有效的好时机。另外，请在Chrome DevTools中检查浏览器从中获取文件的位置（Google服务器或本地目录）。它应位于
下的源代码树中
```
/top/[your domain or IP]/framework/google-translate-widget/element.js?cb=googleTranslateElementInit
```
我们需要Google服务器中的另一个文件。浏览源代码树以
```
/top/translate.googleapis.com/translate_static/css/translateelement.css
```
单击大括号 {} 后下载此文件。我将其保存为网站文件目录中的
```
/framework/google-translate-widget/translateelement.css
```
在您的网站文件目录中，打开element.js并更改第66行：
```
//c._ps = b + '/translate_static/css/translateelement.css';
c._ps = '/framework/google-translate-widget/translateelement.css';
```
从现在开始，您的网站还将从其本地目录加载translateelement.css。立即检查。

打开本地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

现在可以使用几何了，但是我们又弄坏了。显示“选择语言”，“Sélectionnerune langue”或用您的语言说的内容的小部件文本现在已锁定为该语言。由于您希望其他语言的读者理解该优惠，因此该小部件应适应他们的语言，因为它在我们被黑之前就可以正常工作。此外，列出的语言名称也会受到影响。可以在文件element.js中找到此错误的原因，该文件是根据我们的浏览器的语言设置专门定制的。在第element.js行第51和第69行
```
c._cl = 'fr';
```
```
_loadJs(b + '/translate_static/js/element/main_fr.js');
```
在我的情况下，它设置为法语（fr）。

更正第51行就像
```
c._cl = 'auto'; //'fr';
```
第61行比较棘手，因为没有可用的“自动”值。 Google服务器上有一个文件main.js（不带_fr结尾），该文件提供英语作为后备，但我们更喜欢用户的语言。看看文件
```
/top/translate.googleapis.com/translate_a/l?client=…
```
它包含两个对象。 sl和tl表示翻译支持的源语言和目标语言。我们必须检查用户的浏览器是否设置为目标语言之一。有一个JavaScript常量navigator.language。

在第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＆＃39;来改变下拉列表的位置。值。

这应该有效。如果它没有，请告诉我，我会再看看。

为移动网站设置Google Translate小部件样式

3 个答案: