检测GoogleChrome翻译

我已经将 Google 翻译栏添加到我们的网站,但是由于布局的工作原理,如果主导航上的翻译比英语长,则将一些链接向下推到下一行并开始覆盖其他元素。我有一些 Javascript 可以检测翻译栏是否正在使用,并使菜单和搜索框的包含 div 变宽以进行补偿,而这确实会影响布局,到目前为止,它比覆盖页面的一部分更可取。

我已经将 Google 翻译栏添加到我们的网站,但是由于布局的工作原理,如果主导航上的翻译比英语长,则将一些链接向下推到下一行并开始覆盖其他元素。我有一些 Javascript 可以检测翻译栏是否正在使用,并使菜单和搜索框的包含 div 变宽以进行补偿,而这确实会影响布局,到目前为止,它比覆盖页面的一部分更可取。

然而,Chrome 现在已经翻译内置到浏览器中,如果有人使用这个,他们显然不会使用嵌入式版本,所以我无法检测到它来应用我的宽度修复。

24

也许尝试使用 js 来检测菜单内容是否已更改,然后应用新样式。

UPDATE

当 Chrome 翻译页面时,它会向页面添加几个元素:

两个script元素到head标记

全局对象window.google

class = "translated-ltr"tohtmltag div id="goog-gt-tt"tobodytag

您可以查看 DOM 中的更改,以了解内容何时翻译:

document.addEventListener('DOMSubtreeModified', function (e) {
    if(e.target.tagName === 'HTML' && window.google) {
        if(e.target.className.match('translated')) {
            // page has been translated
         } else {
            // page has been translated and translation was canceled
        }
   }
}, true);
8

我知道这太晚了……这不是一个 JS 解决方案……但是,如果您只需要确保在显示 Google Translate 栏时可以对页面上的元素进行样式设置,则可以使用 CSS。Translate 代码在 body 标记中添加了一个类“translated-ltr”(如果语言是从右到左而不是像英语那样从左到右,则为“translated-rtl”)。

所以你可以使用 CSS 类:

.translated-ltr .nav, .translated-rtl .nav {}

根据需要替换正确的类 / ID 为您的项目。

希望这有帮助!

7

截至 2019 年,上面选择的答案似乎并不完全有效,但是我已经能够使用以下修改版本来跟踪<html>元素(document.documentElement)的类名更改翻译或使用“显示原始”时:

var observer = new MutationObserver(function (event) {
    if(document.documentElement.className.match('translated')) {
        alert("Page translate");
    } else {
        alert("Page untranslate");
    }
});
observer.observe(document.documentElement, {
  attributes: true,
  attributeFilter: ['class'],
  childList: false,
  characterData: false
});

但是,重要的是要注意,这将在页面翻译开始时,在实际更改单个内容之前触发。

如果您需要执行一个取决于翻译文本特征的操作(例如,检查它现在是否溢出了 div),那么您需要跟踪具有文本内容的元素的更改,以查看它们是否已被翻译,同时还使用上面的代码设置一个标志来确定更改是翻译的结果,还是还原到原始文本。

4

我刚刚在 Google Chrome,Yandex Browser 和 Microsoft Translate Extension 中的detecting automatic machine-translations上写了一篇文章。我还没有弄清楚如何检测 Naver Whale 浏览器,这是最后一个具有内置页面翻译功能的浏览器。

它的简短和甜蜜正在关注以下 DOM 标记:

!!document.querySelector("html.translated-ltr, head.translated-rtl, ya-tr-span, *[_msttexthash]");

您可以从域名列表(在链接的文章中找到)中检测基于 Web 的翻译服务。

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(721)
我应该使用CSS或SVG来显示形状吗
上一篇
如何从另一个php文件调用一个php文件的函数并将参数传递给它
下一篇

相关推荐

  • cvt和自动挡哪个好提升驾驶体验的最佳选择

    CVT(可变转换器)是一种由传动带及传动轮组成的无级变速器,它可以在没有传动档位的情况下,根据驾驶者的驾驶习惯,自动调整传动轮之间的转速比,从而实现无级变速。自动挡是指车辆自动变速箱,它使用液力传动来实现变速,可以自动适应车辆的行驶状态,减少司机的疲劳,提高行车的舒适性。…

    2023-06-08 07:42:19
    0 10 21
  • cv一叶扁舟和清影轩阳:漫游在一叶扁舟和清影轩阳之间

    cv一叶扁舟是一款开源的计算机视觉库,用于图像处理、计算机视觉等。它提供了丰富的API,可以帮助开发者快速实现各种图像处理任务,如图像分割、目标检测、图像识别等。清影轩阳是一款开源的计算机视觉框架,用于图像处理、目标检测、分类等。它提供了丰富的API,可以帮助开发者快速实现各种图像处理任务,如图像分割、目标检测、图像识别等。…

    2023-08-05 07:06:20
    0 40 78
  • css设置滚动条宽度设置:This is a title

    CSS设置滚动条宽度的方法:使用CSS3的。-webkit-属性:…

    2023-06-06 10:53:01
    0 68 53
  • xl和xe汽车cvt:探索XL和XE汽车的CVT技术优势

    XL和XE汽车CVT是一种变速器,它使用液力变矩器代替传统的机械变速器,以达到更高的效率。它的工作原理是,当发动机输出功率时,液力变矩器就会将这些功率转换为液压能量,然后将能量传递到变速器的输出轴上,从而实现变速。…

    2023-04-09 00:41:04
    0 46 40
  • cordon bleu是什么意思:法式炸鸡卷——Cordon Bleu的经典之作

    Cordon Bleu是一种烹饪技术,其中肉片被置于奶酪和火腿之间,然后用面包屑裹上,最后煎炸或烤熟。这种技术通常用于制作鸡肉,但也可以用于制作其他类型的肉类,如牛肉或猪肉。…

    2024-01-27 15:13:30
    0 56 13
  • countif 非空:非空单元格的计数

    Countif 非空是指计算某个单元格不为空的数量。代码如下:…

    2023-04-22 15:54:15
    0 27 12
  • java double保留一位小数:How to Round a Double to One Decimal Place in

    示例示例使用类可以轻松实现java double保留一位小数的功能,具体代码如下:// 创建对象…

    2023-05-14 07:40:03
    0 76 76
  • linux如何写c语言一个完整的指南

    示例示例在Linux系统中,可以使用C语言编写源代码文件,然后使用GCC编译器来编译源代码文件,生成可执行文件。下面是一个简单的C语言代码示例:…

    2023-05-16 02:02:45
    0 23 50

发表评论

登录 后才能评论

评论列表(27条)